使用jQuery切换兄弟元素 [英] Toggling sibling elements with jQuery

问题描述

我要切换列表中链接的下一个同级项，

<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/

非常感谢。

推荐答案

不是以错误状态结束的.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()，然后通过使用.not()筛选掉同级元素来查找所有其他<ul>元素。

这稍微清理了一些，使它更容易，它解决的主要问题是不排除.removeClass()中的同级，这就是导致您以前的.toggle()状态不正确的原因。

这篇关于使用jQuery切换兄弟元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！