jQuery从左侧显示隐藏滑动面板 [英] jQuery show hide sliding panel from left side

问题描述

我希望面板在单击按钮时从浏览器的左侧滑动，而在单击相同按钮(切换)时隐藏面板.

I want a panel to slide from left edge of browser when clicking a button and hide the panel when clicking the same button (toggle).

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');
});
});

它正在显示面板，但没有隐藏面板.使用的选择器有问题吗?

It is showing the panel but not hiding the panel. Any problem with the selectors used?

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

推荐答案

正如其他人对jQuery所说的，一旦文档初始化，它仅查找最初存在的元素.因此，您的.show函数每次都在运行.

As others have said with jQuery once the document is initialized its only looking for elements that initially existed. For that reason your .show function was being run every time.

您无需查看.slider-arrow.show上的click事件，而只需查看.slider-arrow，然后像在本示例中一样单击该对象即可检查类.

Instead of looking for a click event on .slider-arrow.show you can just look at .slider-arrow and then check for the classes once it has been clicked like in this example.

$(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/

这篇关于jQuery从左侧显示隐藏滑动面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！