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

您应该将最后一个打开的项目保存在＆＃34; global＆＃34;变量，在打开新的之前，关闭前一个。像这样：

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

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

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

检查链接;）

Answer 2

jQuery( document ).ready(function($) {


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



        $( this ).children('ul').slideToggle( "slow");
    $( this ).siblings().children('ul').slideUp( "slow");
    });

  });

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

编辑：

jQuery( document ).ready(function($) {

    $( "li" ).click(function(e) {

e.stopPropagation();

        $( this ).children('ul').slideToggle( "slow");
    $( this ).siblings().children('ul').slideUp( "slow");
    });



  });

现在它应该有效，希望如此。：）

Answer 3

我不确定我是否完全理解你要做的是什么，但你可以尝试关闭除你点击的那些之外的所有其他父项。

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

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

    //Here you could use slideUp() instead of hide() if you prefer to have an animation.
    $("li.has-children").not(this).find("ul.children").hide();

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

    return false;
});

希望这有帮助！

Answer 4

试试这个：

$( "li.has-children" ).click(function() {
    if($(".open-me"))
        $(".open-me").removeClass('open-me');

    $(this).addClass('open-me');
    $( ".open-me ul.children" ).slideToggle( "slow", function() {
        //other things
    });

    return false;
});

jQuery slideToggle具有相同类的HTML列表

4 个答案: