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