Question

我正在使用jQuery来显示和隐藏每个帖子的编辑选项。这是我正在使用的jQuery：

$(document).ready(function () {
    $(".post-menu").click(function () {
        $(".menu-options ul").toggle();
    });
    $(".edit-option").click(function () {
        $("#edit-post").show();
        $(".menu-options ul").toggle();
    });
    $("#never-mind").click(function () {
        $("#edit-post").hide();
    });
})

关于代码的简介：后菜单是处理show hide事件的div，edit-options是必须弹出的<ul>，包含编辑和删除{{ 1}}在其中，＃edit-post是textarea的div，提交按钮（使用ajax jquery;不需要表单），＃never-mind是一个关闭它的按钮。

div代码是：

<li>

所需行为：仅显示所选帖子的选项面板。

当前行为：问题是当我只想显示所选帖子的选项面板时，它会取消每个帖子的选项面板。

我做错了什么？

Answer 1

假设你有多个div post-menu＆amp;你需要相应的菜单选项来根据上下文切换。这就是你需要的。

$(".post-menu").click(function (e) {
    $(this).find(".menu-options ul").toggle();
});

编辑：正如@Roko所说..如果你不想冒泡事件传播..

使用e.stopPropagation()

Answer 2

<div style="width: 20px; height: 8px;" />Options</div>不是关闭DIV元素的方式（注意/>）

如果要处理多个元素，请避免使用ID 使用正确的选择器来完成$(this).next()等工作......并且你已经完成了。

Answer 3

对于有多个条目的jfiddle很有用，但我认为你只需要添加$（this）

此外，您可能需要将菜单选项转换为ID而不是类

$(document).ready(function () {
 $(".post-menu").click(function () {
    $(this).(".menu-options ul").toggle();
});
$(".edit-option").click(function () {
    $(this).("#edit-post").show();
    $(this).(".menu-options ul").toggle();
});
$("#never-mind").click(function () {
    $(this).("#edit-post").hide();
});
})

Answer 4

我参加聚会有点晚了，但这是我的回答。

jsFiddle here

这里有一些问题（这就是为什么需要一段时间才能发布此内容）。

如果您使用循环输出用户帖子，则ID将被复制。这是禁忌。请使用类，或为每个ID添加唯一标识符。查看添加到每个后菜单div的ID。
您的jQuery说当用户点击'post-menu'div时切换UL元素，但如果他们点击'post-menu'内的'edit'项也要切换相同的元素DIV。换句话说，当用户单击EDIT按钮时，两个事件都将触发，UL将切换两次。使用e.stopPropagation（）来避免这种情况。
由于您无法可靠地知道所单击项目附近元素的唯一 ID，因此您应该使用jQuery DOM遍历选择器，例如next()或parent()。看我的例子。
当我找到正确的元素时，您可以看到我如何提醒找到的元素ID。我离开那些测试只是为了告诉你如何做到这一点。

修改后的HTML：

<div class="post-menu" id="PostMenu1">
    <div style="width: 20px; height: 8px;" id="OptionsDiv">Options</div>
    <div class="menu-options">
        <ul id="myUL" class="myUL">
            <li class="edit-option">Edit</li>
            <li class="delete-option">Delete</li>
        </ul>
    </div>
</div>
<div style="display: none;" class="edit-post">
    <textarea id="new-post-message">@row.Message1</textarea>
    <br>
    <button class="savebutt" onclick="updatepost(@row.PostId)">Save</button>
    <button class="never-mind">Never mind</button>
    <div class="error-post"></div>
</div>
<!-- ---------------------------------------------------------- -->
<div class="post-menu" id="PostMenu2">
    <div style="width: 20px; height: 8px;">Options</div>
    <div class="menu-options">
        <ul>
            <li class="edit-option">Edit</li>
            <li class="delete-option">Delete</li>
        </ul>
    </div>
</div>
<div style="display: none;" class="edit-post">
    <textarea id="new-post-message">@row.Message2</textarea>
    <br>
    <button onclick="updatepost(@row.PostId)">Save</button>
    <button class="never-mind">Never mind</button>
    <div class="error-post"></div>
</div>

修订过的JQUERY：

$(".post-menu").click(function () {
    $(this).find(".menu-options ul").toggle();
});
$(".edit-option").click(function (e) {
    $(this).find(".edit-post").show();
    //var x = $(this).closest('div').parent().next().attr('class');
    //alert(x);

    //$(this).parent().parent().find('ul').toggle();
    $(this).closest('div').parent().next().toggle();
    e.stopPropagation();
    //var x = $(this).parent().parent().find('ul').attr('class');
    //alert(x);
});
$(".never-mind").click(function () {
    //var x = $(this).closest('div').attr('class');
    //alert(x);
    $(this).closest('div').hide();
});
$('.delete-option').click(function(e) {
    var x = $(this).closest('div').parent().attr('id');
    alert('Deleting DIV with ID: ' + x);
    e.stopPropagation();

});

如何使用jQuery显示特定div的表单

4 个答案: