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('&laquo;').removeClass('show').addClass('hide');
});

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

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

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

Answer 1

正如其他人在初始化文档时用jQuery所说的那样，它只查找最初存在的元素。因此，每次都会运行.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('&laquo;').removeClass('show').addClass('hide');
    }
    else {      
    $( ".slider-arrow, .panel" ).animate({
      left: "-=300"
      }, 700, function() {
        // Animation complete.
      });
      $(this).html('&raquo;').removeClass('hide').addClass('show');    
    }
  });
});

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

Answer 2

由于您使用jQuery在加载DOM之后操作“show”和“hide”，因此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...

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

$(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 = "&laquo;";
  if($(anchor).hasClass("hide")){
    diff = "-=300";
    removeClass = "hide";
    addClass="show";
    arrows = '&raquo;';
  }
  $( ".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>

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

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

6 个答案: