Переключить div, который не является родным братом

Question

Переключить div, который не является родным братом

0

Мне нужна помощь с folloiwng, пожалуйста... Мне нужно щелкнуть значок, чтобы открыть скрытый div, который не является следующим элементом. Это моя разметка (запись div повторяется несколько раз на странице...

<div class='record'>
    <div class="marker_name left"><a href="marker.php?id=11444">Name</a></div>
    <div class="clear table">
        <div class="tr">
            <div class="td"><div class="icon_32"><img src="images/flags/DE.png"></div></div>
            <div class="td"><div class="icon_32 type_sprite spr_ASN"></div></div>
            <div class="td"><div class="icon_32"><img src="images/site/web_32.png"></a></div></div>
            <div class="td mid"><div class="bearing icon_32 bearing_N"></div></div>
            <div class="td mid"><div class="distance">0kM</div></div>
            <div class="td"><div class="trigger icon_32"></div></div>
        </div>
    </div>
    <div class="hidden">
        <ul>
            <li>List of features</li>
        </ul>
    </div>  
</div>

Это мой jQuery, где вы можете увидеть разные вещи, которые я пробовал, безрезультатно.

$(document).ready(function(){
        $('.hidden').hide();

        $('.trigger').click(function()
                {
                $(this).toggleClass('active');
                //$(this).next().next().toggle();
                //$(this).nextAll('.hidden').toggle();
                //$(".record").next(".hidden").toggle();
                $(".record").nextAll(".hidden").toggle();
                }
        );
});

Div с классом "trigger" должен открыть div с классом "hidden" и в идеале закрыть любой другой класс со скрытым, который теперь виден. Может ли кто-нибудь указать мне в правильном направлении?

lifeson 30 нояб. 2013, в 18:32

Источник

Теги:

jquery

html

toggle

4 ответа

1

$(document).ready(function () {
    $('.hidden').hide();

    var $recs = $(".record"),
        $hiddens = $recs.find(".hidden"),
        $triggers = $recs.find(".trigger");
    $('.trigger').click(function () {
        $(this).toggleClass('active');

        var $rec = $(this).closest('.record');
        var $hidden = $rec.find('.hidden').toggle();

        $hiddens.not($hidden).hide();
        $triggers.not(this).removeClass('active')
    });
});

Демо: скрипка

Arun P Johny 30 нояб. 2013, в 15:18

0

$(document).ready(function(){
    $('.hidden').hide();

    $('.trigger').click(function() {
        $('.hidden').hide();
        $(this).toggleClass('active').closest('.record').find('.hidden').toggle();
    });
});

Это скрывает все .hidden div, а затем, когда .hidden триггер, он снова скрывает их все, смотрит на спусковой крючок и находит ближайший. .record дерево .hidden, находит .hidden внутри него и затем переключает видимость Это.

Advocation 30 нояб. 2013, в 16:35

0

Конечно, он также скрывает текущий .hidden , а затем переключает его, чтобы он всегда был виден?
adeneo 30 нояб. 2013, в 17:48
0

Хорошая точка зрения! Размышляя, я бы пошел по маршруту, который вы показали.
Advocation 30 нояб. 2013, в 18:15

0

Если вы найдете родительскую запись, а затем скрытый ребенок, который должен работать:

    $('.trigger').click(function() {
            $(this).parent('.record').find('.hidden').toggle();
    );

brian2013 30 нояб. 2013, в 15:33

Ещё вопросы

Конечно, он также скрывает текущий .hidden , а затем переключает его, чтобы он всегда был виден?
Хорошая точка зрения! Размышляя, я бы пошел по маршруту, который вы показали.

adeneo · Accepted Answer · 2013-11-30T15-06-00.000Z

$(document).ready(function(){
    $('.hidden').hide();

    $('.trigger').click(function() {
        var el = $(this).toggleClass('active')
                        .closest('.record')
                        .find('.hidden').toggle();

        $('.hidden:visible').not(el).hide();
    });
});

FIDDLE

Ничего себе, не ожидал ответа так быстро, это сработало именно так, как я хотел