jquery alt Accordion 不关闭

Question

出于各种原因，我创建了一个 Accordion ，它具有指定的高度和溢出:隐藏并在点击时完全打开。但是，我无法在单击所需按钮时将其折叠起来。

这是相关的 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; }

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

Answer 1

当您在点击处理程序中更改类时，您应该委托(delegate)事件:

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