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

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

HTML

 
 » 

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

正如其他人在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('«').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来操作“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 = "«"; 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); }); }); }); 

所以你只有一个动画function。

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

Answer 4

您应该尝试使用.slideToggle() ，放入.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'); }