列表“下拉列表”的问题以及哪个列表项获得下拉列表答案

【问题标题】：Troubles with list "dropdowns" and which list item gets the dropdown列表“下拉列表”的问题以及哪个列表项获得下拉列表
【发布时间】：2010-04-12 16:05:50
【问题描述】：

我正在开发一个 MMO“公会”项目，该项目为公会成员提供随机生成的游戏任务。他们可以“阻止”分配三个任务。

列表如下所示：

<ul>
    <li class="blocked">Task that is blocked</li>
    <li class="blocked-open">Click to block a task</li>
    <li class="blocked-open">Click to block a task</li>
</ul>

blocked-open 类表示他们尚未选择要阻止的任务。 blocked 任务意味着他们已经阻止了一个任务。当他们单击列表项时，我希望它出现：

<ul class="tasks-dropdown no-display">
    <li><h1>Click a Task to Block</h1></li>
        <ul class="task-dropdown-inner">
            <?php
                //output all tasks
                    foreach($tasks as $task) {
                        echo '<li class="blocked-option"><span id="'.$task.'">'.$task.'</span></li>';
                        }
            ?>
            <br class="clear" />
        </ul>
</ul>

我不太清楚，当用户点击.blocked-open 行项目时，如何在仅他们点击的那个下拉菜单下显示该下拉菜单。

在我感到困惑之前，我的 jQuery 看起来像这样。

$("li.blocked-open").click(function() {
    $("ul.no-display").slideToggle("900");
    });

    $(".blocked-option span").click(function() {
        var task = $(this).attr('id');
            alert("You have blocked: " + task);
            location.reload(true);
        });

我通过将下拉菜单放在代码中的一个行项目下对其进行了测试，它运行良好，但是当我在代码中有多个下拉菜单时，单击一个行项目会切换所有下拉菜单。我不知道该怎么办。 :-p.

【问题讨论】：

标签： php javascript jquery

【解决方案1】：

您的问题是因为您目前无法唯一确定要显示的下拉菜单以及将其与您单击的项目相关联的方法。一种简单但不是很灵活的方法是为每个“阻塞”或“阻塞打开”项目分配一个简单的数字 id。然后给每个下拉列表一个 id，例如 dropdown_1。然后将您的代码调整为如下所示：

$("li.blocked-open").click(function() {
    var id = $(this).attr("id");
    $("#dropdown_"+id).slideToggle("900");
});

我还没有测试过这个，但它应该可以工作......我认为:)

【讨论】：