jquery - jquery alt 手风琴没有关闭

Question

由于各种原因，我创建了一个具有指定高度和溢出的手风琴：隐藏并在点击时完全打开。但是，当我单击所需的按钮时，我不能让它崩溃。

这是相关的JS：

$(document).ready(
    function(){
        $('li.ww_slides').addClass('livequery').append('<span class="nav"></span>');
        $("li.ww_slides").click(function () {
            $('li.ww_slides').removeClass('active');
            $(this).addClass('active');
            $('span.nav').addClass('open').css('bottom','0');
        });

        $("span.open").click(function () {
            $(this).parent().removeClass('active');
        });
    }
);

这是相关的CSS：

.ww_main_preview ul li.active { margin-bottom: 10px; padding-bottom: 10px; height:    auto!important; }
.ww_main_preview ul li.active span.nav { background-position: top center; }
.ww_main_preview ul li.livequery { overflow: hidden; height: 76px; margin-bottom: 10px; padding-bottom: 10px; }

如何在单击相关 span.nav.open 时关闭 li.ww_slides？

Answer 1

当您在单击处理程序中更改类时，您应该委托事件：

$("li.ww_slides").on("click", "span.open", function() {
    $(this).parent().removeClass('active');
});

或者：

$(document).ready(function(){
   $('li.ww_slides')
          .addClass('livequery')
          .append('<span class="nav"></span>')
          .click(function() {
              $('li.ww_slides').removeClass('active');
              $('span.nav').removeClass('open');
              $(this).addClass('active')
                     .find('.nav')
                     .addClass('open')
                     .css('bottom','0');
          }).on('click', 'span.open', function(event) {
              event.stopPropagation();
              $(this).parent().toggleClass('active');
          });
});