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 jquery siblings
person laukok    schedule 06.08.2010    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Вместо функции .toggle(), которая оказывается в неправильном состоянии, вы можете просто использовать обычную функцию click и вместо этого используйте .toggleClass(), например:

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

Вы можете попробовать здесь, это делает .toggleClass() в родственном элементе, затем ищет все другие <ul> элементы, отфильтровывая родственный элемент с помощью .not().

Это немного упрощает задачу. Основная проблема, которую она решает, — это неисключение родственного элемента из .removeClass(), именно поэтому ваше состояние .toggle() раньше было неверным.

person Nick Craver    schedule 06.08.2010
comment
спасибо тебе большое! я совершенно забыл о .toggleClass()! теперь работает отлично :-))) - person laukok; 06.08.2010
comment
извините, я должен вернуться к вам с той же проблемой... Я только что понял, что текущий родитель больше не переключается, он переключается только тогда, когда я нажимаю на других родителей... посмотрите здесь, lauthiamkok.net/tmp/jquery/toggle/index_1.html, например, когда я нажимаю на ссылку 2 только, я надеялся показать и его родного брата. и скрыть его, когда я снова нажму на этого родителя. Является ли это возможным...? Благодарность! - person laukok; 06.08.2010

arrow_upward
1
arrow_downward

См. модифицированную функцию. Всего одно изменение, и все будет работать нормально.

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

    }
});
person simplyharsh    schedule 06.08.2010
comment
все еще есть проблема с этим предложением... но я изменил код, как предложил Ник выше, $(this).click(function (){ var myUL = $(this).siblings(.selected).toggleClass(showme ); $(ul).not(myUL).removeClass(showme); вернуть ложь; }); - person laukok; 06.08.2010