Troubles with list "dropdowns" and which list item gets the dropdown

I'm working on a project for an MMO "guild" that gives members of the guild randomly generated tasks for the game. They can "block" three tasks from being assigned.

The lists will look something like this:

<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>

The blocked-open class means they haven't chosen a task to block yet. The blocked task means they've already blocked a task. When they click the list item, I want this to appear:

<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.'<开发者_StackOverflow;/span></li>';
                        }
            ?>
            <br class="clear" />
        </ul>
</ul>

I don't quite know how, when the user clicks the .blocked-open line-item, to show that dropdown under only the one they clicked.

My jQuery looked like this before I became confused.

$("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);
        });

I tested it by putting the dropdown under a line item in the code, and it worked fine, but when I have more than one dropdown in the code, clicking on one line item toggles all the dropdowns. I'm not sure what to do. :-p.

Your problem is caused because you currently have no way of uniquely identifying which dropdown you want to appear and that links it with the item you've clicked. An easy way, but not very flexible, would be to assign a simple numerical id to each "blocked" or "blocked-open" item. Then give each dropdown an id of something like eg dropdown_1. Then adjust your code to something like this:

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

I haven't tested this, but it should work... I think :)