Problèmes avec la liste "dropdowns" et quel élément de la liste obtient la liste déroulante

Question

Je travaille sur un projet pour une "guilde" MMO qui donne aux membres de la guilde des tâches générées aléatoirement pour le jeu. Ils peuvent "bloquer" l'assignation de trois tâches.

Les listes ressemblera à quelque chose comme ceci:

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

La classe qu'ils ont signifie blocked-open pas choisi une tâche pour bloquer encore. La tâche blocked signifie qu'ils ont déjà bloqué une tâche. Lorsqu'ils cliquent sur l'élément de liste, je veux que cela apparaisse:

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

Je ne sais pas comment, lorsque l'utilisateur clique sur la ligne article .blocked-open, pour montrer que la liste déroulante sous que celui qu'ils cliqués .

Mon jQuery ressemblait à ceci avant que je devienne confus.

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

Je l'ai testé en plaçant le menu déroulant sous une ligne dans le code, et il a bien fonctionné, mais quand j'ai plus d'un menu déroulant dans le code, en cliquant sur un élément de ligne permet de basculer tous les menus déroulants. Je ne suis pas sûr de ce qu'il faut faire. :-p.

Answer 1

Votre problème est dû au fait que vous n'avez actuellement aucun moyen d'identifier de manière unique la liste déroulante que vous souhaitez afficher et de la lier à l'élément sur lequel vous avez cliqué. Un moyen simple, mais pas très flexible, serait d'attribuer un identifiant numérique simple à chaque élément "bloqué" ou "bloqué-ouvert". Donnez ensuite à chaque liste déroulante un identifiant de quelque chose comme par exemple dropdown_1. Réglez ensuite votre code à quelque chose comme ceci:

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

Je n'ai pas testé, mais il devrait fonctionner ... Je pense :)