DEMO

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

我认为您希望将show隐藏为您想要的常见问题，希望这对您有所帮助

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显示/隐藏下一个div

3 个答案:

DEMO