javascript - jQuery显示从左侧隐藏滑动面板

Question

我希望面板在单击按钮时从浏览器的左边缘滑动，并在单击同一按钮（切换）时隐藏面板。

html

  <div class="panel">
  </div>

  <a href="javascript:void(0);" class="slider-arrow show">&raquo;</a>

CSS

.panel {
width:300px;
float:left;
height:550px;
background:#d9dada;
position:relative;
left:-300px;

}
.slider-arrow {
padding:5px;
width:10px;
float:left;
background:#d9dada;
font:400 12px Arial, Helvetica, sans-serif;
color:#000;
text-decoration:none;
position:relative;
left:-300px;
}

jQuery

$(function(){
$('.slider-arrow.show').click(function(){
    $( ".slider-arrow, .panel" ).animate({
      left: "+=300"
      }, 700, function() {
        // Animation complete.
      });
      $(this).html('«').removeClass('show').addClass('hide');
});

$('.slider-arrow.hide').click(function(){
    $( ".slider-arrow, .panel" ).animate({
      left: "-=300"
      }, 700, function() {
        // Animation complete.
      });
      $(this).html('»').removeClass('hide').addClass('show');
});
});

它显示面板但不隐藏面板。使用的选择器有问题吗？

http://jsfiddle.net/Paramasivan/eHded/1/

Answer 1

正如其他人所说的，一旦文档被初始化，它只会寻找最初存在的元素。因此，您的.show函数每次都在运行。

无需寻找点击事件，.slider-arrow.show您只需查看.slider-arrow并在点击后检查类，如本例所示。

$(function(){
  $('.slider-arrow').click(function(){
    if($(this).hasClass('show')){
    $( ".slider-arrow, .panel" ).animate({
      left: "+=300"
      }, 700, function() {
        // Animation complete.
      });
      $(this).html('«').removeClass('show').addClass('hide');
    }
    else {      
    $( ".slider-arrow, .panel" ).animate({
      left: "-=300"
      }, 700, function() {
        // Animation complete.
      });
      $(this).html('»').removeClass('hide').addClass('show');    
    }
  });
});

http://jsfiddle.net/eHded/4/

Answer 2

由于您在 DOM 加载后使用 jQuery 来操作“显示”和“隐藏” ，因此 jQuery 不知道这些元素的存在。

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call...

我建议使用 jQueryon()来委托事件并选择动态生成的类，如下所示：

$(document).on('click','.slider-arrow.show',function(){
  ....
});

$(document).on('click','.slider-arrow.hide',function(){
  ....
});

http://jsfiddle.net/eHded/2/

Answer 3

我认为您可以像这样管理从活动锚类中选择的动作：

$(function(){
  $('.slider-arrow').click(function(){
  var anchor = this;
  var removeClass = "show";
  var addClass = "hide";
  var diff = "+=300";
  var arrows = "«";
  if($(anchor).hasClass("hide")){
    diff = "-=300";
    removeClass = "hide";
    addClass="show";
    arrows = '»';
  }
  $( ".slider-arrow, .panel" ).animate({
    left: diff
    }, 700, function() {
    // Animation complete.
      $(anchor).html(arrows).removeClass(removeClass).addClass(addClass);
    });     
  });   
});

所以你只有一个动画功能。

这是更新的小提琴：http: //jsfiddle.net/eHded/5/

Answer 4

你应该尝试使用.slideToggle()，放在一个.click(function(){/*in here*/}).

Answer 5

当您编写时，它会在代码第一次运行时$('.slider-arrow.hide').click(func.....绑定事件（可能在文档准备好时）。click如果稍后更改 DOM（即添加.hide类），则需要重新绑定click事件。

您需要改用 jQuery 的.on()方法（http://api.jquery.com/on/）。

$(document).on('click', '.slider-arrow.show', function() { /*.......*/ });

$(document).on('click', '.slider-arrow.hide', function() { /*.......*/ });

然而，一个更好的选择是使用 CSS3 过渡和 jQuery.toggleClass()

.panel {
    left: -300px;
    transition: left 1s;
    /* other styles... */
}

.panel.expand {
    left: 0;
}

$('.slider-arrow').click(function() {
    $('.panel').toggleClass('expand');
}

Answer 6

对于这个任务，我使用SlideReveal jQuery 插件。

包含库后，设置非常简单：

<div id='slider'>Hello World!!</div>
<button id='trigger'>Trigger</button>

<script>
  $('#slider').slideReveal({
    trigger: $("#trigger")
  });
</script>

有关更多详细信息和实时示例，请参阅文档。