具有相同类的 jQuery slideToggle HTML 列表

Question

我有父列表项，其中包含子列表项。

我无法为此修改 CSS，每个子列表的 CSS 都相同，因此出现了问题。

当使用 slideToggle 时，一旦切换了两个或多个子列表，之前打开的列表不会关闭，因为所有类都是相同的。 (注意，我不能修改这个...)

处理此逻辑的最佳方法是什么:如果打开一个子列表并单击另一个父列表，请关闭之前打开的切换子列表？

简化测试用例: http://codepen.io/anon/pen/vENQyN

$( "li.has-children" ).click(function() {

    $(this).addClass('open-me');

    $( ".open-me ul.children" ).slideToggle( "slow", function() {
        $(".has-children").removeClass('open-me');
    });

  return false;

});

});

谢谢。

Answer 1

您应该将最后打开的元素保存在“全局”变量中，并在打开新元素之前关闭前一个元素。像这样:

if (previouseOpened && previouseOpened.jquery) {
  previouseOpened.removeClass('open-me');
} 
 previouseOpened = $(this);

顺便说一句，如果您需要更多解释，请告诉我，我会这样做

http://codepen.io/anon/pen/empQGQ

检查链接；)