jquery - 使用 jQuery 切换同级元素

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() 在同级上，然后查找所有其他 <ul>元素，通过使用 .not() 过滤掉同级元素.

这清理了一点，使其变得更容易，它解决的主要问题是不排除 .removeClass() 中的 sibling 。 ，这就是导致你的 .toggle() 的原因之前声明不正确。