jQuery show/hide 下一个 div

Question

如何 show/hide 接下来 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

需要 select 父级才能执行 .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();

jQuery show/hide 下一个 div

jQuery show/hide next div

jquery

show

toggle

hide

DEMO