jQuery显示/隐藏下一个div [英] jQuery show/hide next div

问题描述

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

How do I show/hide next div? The following code works:

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

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

... only if the t_edit_cont div is right after the edittopic button. Currently, I have them in separate DIVs, like this:

<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演示.

How can I make this work? jsfiddle demo.

推荐答案

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

You can use parent() to point jQuery in the right path:

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

但是，一种更清洁，更可靠的方法是将单击的按钮和div关联起来.

Yet, a cleaner and more reliable approach would be to associate the clicked button and the div somehow.

例如(使用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();
});    

这篇关于jQuery显示/隐藏下一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！