Question

创建手风琴风格菜单。点击，手风琴div打开，动画效果很好。一切正常。然而，在展开隐藏的div之后，我希望标题div稍微收缩然后随着折叠式div的折叠使其恢复到原始大小。

我有JSFiddle setup。基本上需要纠正第二次单击以将div高度恢复为原始高度。第一次单击正常运行并添加类并为高度更改设置动画。但是无法识别第二次单击。

我忽略了什么简单的事情？

$(function() { 
$(".click").on('click', function(){
$(".animate").animate({height: '50px',},"slow");
    $(this).addClass("expanded");
});

$(".click.expanded").on('click', function(){
$(".animate").animate({height: '100px',},"slow");
    $(this).removeClass("expanded");
});

}）;

Answer 1

问题是您的点击项目在开始时没有展开的类，因此您的绑定无效。

你应该做的事情如下：

$(document).on('click','.click.expanded',function(){//event work});

要解决这些评论，是的，您需要处理原始事件，您可以使用.not selector执行此操作，以便不会触发第一个事件。

$(document).on('click','.click:not(.expanded)', function()

最后，您的代码可能如下所示：

$(function() { 
    $(document).on('click','.click:not(.expanded)', function(){
            $(".animate").animate({height: '50px',},"slow");
            $(this).addClass("expanded");
    });

    $(document).on('click',".click.expanded", function(){
        $(".animate").animate({height: '100px',},"slow");
        $(this).removeClass("expanded");
    });
});

Obligatory Fiddle

这个问题Event binding on dynamically created elements?，即使是关于动态元素，也可以解决您的问题。

Answer 2

正如@JasonWilczak所述，您遇到的问题是您没有加载任何具有expanded类的元素，因此他们不会被分配给您点击事件处理程序。

但是，如果使用事件委派，您仍然会遇到问题，因为原始的click事件处理程序仍然会被触发。

更干净的解决方案是只有一个单击事件处理程序，并检测回调中的expanded类。

取决于存在的expanded类，有条件地运行不同的逻辑。

$(".click").on('click', function(){

   if (!$(this).hasClass("expanded")){
      $(".animate").animate({height: '50px',},"slow");
      $(this).addClass("expanded");
   }
   else {
      $(".animate").animate({height: '100px',},"slow");
      $(this).removeClass("expanded");
   }

});

我已经更新了你的jsFiddle以证明这一点：

http://jsfiddle.net/ecLxkgj9/4/

Answer 3

以下是更新后的fiddle

$(".click").on('click', function(){

if (!$(this).hasClass("expanded")){
  $(".animate").animate({height: '50px',},"slow");
 }
else {
  $(".animate").animate({height: '100px',},"slow");
  }

$(this).toggleClass("expanded");

});

jQuery - 单击/取消选中更改Div高度

3 个答案: