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

Question

创建一个手风琴样式菜单。 单击时，手风琴div打开并设置动画效果很好。 一切正常。 但是，在扩展了隐藏的div之后，我希望标题div稍微缩小，然后在折叠手风琴div时将其还原为原始大小。

我有一个JSFiddle设置 。 基本上需要更正第二次单击才能将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选择器执行此操作，从而不会触发第一个事件。

$(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");
    });
});

义务小提琴

这个问题事件绑定在动态创建的元素上吗？ ，即使是动态元素也可以解决您的问题。

Answer 2

正如@JasonWilczak所指出的那样，您遇到的问题是，加载时没有任何具有expanded类的元素，因此不会为它们分配此click事件处理程序。

但是，如果您使用事件委托，您仍然会遇到问题，因为原始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

这是更新的小提琴

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

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

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

});