jquery - jquery子元素作为触发器

Question

单击“论坛标题”时，我希望父“论坛主题头”中的“子主题框架”展开。此页面上有多个“forum-topics-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();
    });
});

Answer 1

你可以使用siblings()jQuery 函数：

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

Answer 2

您可以使用this,.closest()和.find()仅在当前单击的部分内进行操作。例如：

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

Answer 3

在这里小提琴：http: //jsfiddle.net/tkcRa/

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