JQuery дочерний элемент в качестве триггера

Question

JQuery дочерний элемент в качестве триггера

0

Когда нажимается "название форума", я хочу, чтобы "subtopic-frame" внутри родительского "forum-themes-head" расширялся. На этой странице есть несколько "forum-themes-head" (со всеми дочерними элементами).

То, как я это делаю сейчас, "forum-themes-head" - это триггер, но я хочу, чтобы "форум-заголовок" был триггером.

HTML:

<div class="forum-topic-head">
    <div class="forum-title">Forum Title</div>
    <div class="subtopic-frame">
        subtopic 1
        subtopic 2
    </div>
</div>

JQuery:

$(document).ready(function(){
    $(".forum-topic-head").click(function(){
        $(this).children(".subtopic-frame").slideToggle("slow");
        $(this).children(".expand").delay("200").fadeToggle();
    });
});

Dan w 09 нояб. 2013, в 23:45

Источник

0

как насчет того, чтобы показать, как у вас это сейчас
caramba 09 нояб. 2013, в 21:53
0

Дох ... забыл вставить его туда. Обновление, чтобы показать текущий JQuery
Dan w 09 нояб. 2013, в 21:55

Теги:

jquery

3 ответа

0

Вы можете использовать this .closest() и .find() для работы только в разделе, которое вы нажимаете в данный момент. Например:

$(".forum-title").click(function() {
    $(this).closest(".forum-topic-head").find(".subtopic-frame").slideToggle("slow');
});

jfriend00 09 нояб. 2013, в 19:44

0

скрипка здесь: http://jsfiddle.net/tkcRa/

$(document).ready(function(){
    $('.forum-title').on('click',function(){
        $(this).parent('.forum-topic-head').children('.subtopic-frame').slideToggle();
    });
});

caramba 09 нояб. 2013, в 19:10

Ещё вопросы

как насчет того, чтобы показать, как у вас это сейчас
Дох ... забыл вставить его туда. Обновление, чтобы показать текущий JQuery

Nasser Torabzade · Accepted Answer · 2013-11-09T19-58-00.000Z

вы можете использовать функцию siblings() jQuery:

$(document).ready(function(){
    $(".forum-title").click(function(){
        $(this).siblings(".subtopic-frame").slideToggle("slow");
        $(this).siblings(".expand").delay("200").fadeToggle();
    });
});