2

このようなリスト内のリンクの次の兄弟を切り替えたいのですが、

<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;
    }

まず第一に、それは問題ないようです-ターゲットの兄弟を切り替えることができますが、どの親で最初に切り替えた後、現在の親でクリック/切り替えるときに他の兄弟を非表示にするために、いつか2回クリックする必要があるのはなぜですか？

明確に説明していない場合は、ここにライブサイトがあります 。http：//lauthiamkok.net/tmp/jquery/toggle/

どうもありがとう、ラウ

4

2 に答える 2

5

.toggle()間違った状態になってしまう関数の代わりに、次のように通常の関数clickを.toggleClass()代わりに使用することができます:

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

ここで試してみることができます。これは兄弟に対して を実行し、 で兄弟を除外することにより、他の.toggleClass()すべての要素を探します。 <ul>.not()

これにより、少しクリーンアップされて簡単になります。解決する主な問題は、兄弟が から除外されないことです。これが、以前に状態が正しくなかった.removeClass()原因です。.toggle()

于 2010-08-06T15:47:07.147 に答える
1

変更された関数を参照してください。1 つの変更だけで、正常に動作します。

$("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"});
        });

    }
});
于 2010-08-06T15:57:00.390 に答える