Question

我想在这样的列表中切换链接的下一个兄弟，

<ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a>
        <ul class="selected">
            <li><a href="#">2.1</a></li>
            <li><a href="#">2.2</a></li>
            <li><a href="#">2.3</a></li>
        </ul>
    </li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a>
        <ul class="selected">
            <li><a href="#">4.1</a></li>
            <li><a href="#">4.2</a></li>
            <li><a href="#">4.3</a></li>
        </ul>
    </li>
    <li><a href="#">5</a></li>
</ul>

这是我的jquery，

$(document).ready(function(){

    $("a").each(function () {
        if ( $(this).siblings().size() > 0) 
        {
            $(this).append("<span class='has-child'>has child</span>");

            $(this).toggle(
                function (){
                    $("ul").removeClass("showme");
                    $(this).siblings(".selected").addClass("showme");
                    //$(this).next().css({display: "block"});
                },
                function (){
                    $(this).siblings(".selected").removeClass("showme");
                    //$(this).next().css({display: "none"});
            });

        }
    });

    $('ul > li > ul > li:last-child > a').css('background','yellow');

});

css，

ul > li > ul {
        display:none;
    }

    ul > li:hover ul{
        display: block;
    }
    .showme {
        display: block;
    }

首先，它看起来很好 - 我可以切换目标兄弟，但为什么在任何父级的第一次切换后，我必须单击两次以隐藏其他兄弟姐妹当我点击/切换当前父级时？

如果我没有清楚解释，这里是现场网站， http://lauthiamkok.net/tmp/jquery/toggle/

非常感谢，刘

Answer 1

而不是最终处于错误状态的.toggle()函数，您只需使用普通click函数并使用.toggleClass()代替，如下所示：

$(this).click(function (){
  var myUL = $(this).siblings(".selected").toggleClass("showme");
  $("ul").not(myUL).removeClass("showme");
});

You can give it a try here，这会对兄弟提供.toggleClass()，然后通过使用{{3}过滤出兄弟姐妹来查找所有其他 <ul>元素}。

这样可以更轻松地解决这个问题，它解决的主要问题是不将.not()兄弟排除在外，这就是导致你的.removeClass()状态不正确的原因。

Answer 2

查看修改后的功能。只需一次更改，它就可以正常工作。

$("a").each(function () {
    if ( $(this).siblings().size() > 0) 
    {
        $(this).append("<span class='has-child'>has child</span>");

        $(this).toggle(
            function (){
                // $("ul").removeClass("showme"); Change this
                $(this).next("ul").removeClass("showme");
                $(this).siblings(".selected").addClass("showme");
                return false;
                //$(this).next().css({display: "block"});
            },
            function (){
                $(this).siblings(".selected").removeClass("showme");
                return false;
                //$(this).next().css({display: "none"});
        });

    }
});

jquery：切换兄弟姐妹

2 个答案: