jQuery 显示/隐藏下一个 div

Question

如何显示/隐藏下一个 div？以下代码有效：

jQuery(".edittopic").click(function() {
    jQuery(this).next(".t_edit_cont").toggle();
});

... 仅当 t_edit_cont div 位于 edittopic 按钮之后。目前，我将它们放在单独的 DIV 中，如下所示：

<div class="t_mod_box">
    <input type="submit" value="Edit" class="edittopic" name="send" /> 
</div>

<div class="t_edit_cont">
   Show hide content inside here...
</div>

我怎样才能做到这一点？ jsfiddle demo.

Answer 1

在做.next()之前需要选择父母

DEMO

$(function() {
    $(".edittopic").on('click', function() {
        $(this).parent().next(".t_edit_cont").toggle();
    });
})

Answer 2

您可以使用parent() 将jQuery 指向正确的路径：

jQuery(this).parent().next(".t_edit_cont").toggle();

然而，一种更简洁、更可靠的方法是将单击的按钮与 div 以某种方式关联。

例如（使用data-属性）：

<input type="submit" value="Edit" class="edittopic" data-id="1" name="send" />

<div class="t_edit_cont" data-id="1">
Show hide content inside here...
</div>

然后：

jQuery(".edittopic").click(function() {
    var btnId = $(this).data('id');
    jQuery('.t_edit_cont[data-id=' + btnId + ']').toggle();
});    

Answer 3

我想你想显示隐藏你想要你的常见问题解答，希望这对你有帮助

http://jsfiddle.net/indianwebdesigner/yhvm4duq/

如果没有，请留言

HTML

<div class="mod_wrap">
    <div class="t_mod_box">
        <a href="#" class="edittopic" name="send">Toggle</a>
    </div>

    <div class="t_edit_cont">
       Show hide content inside here... 1
    </div>
</div>

jQuery

$(this).parents(".mod_wrap").find(".t_edit_cont").slideToggle();