come rendere visibile e invisibile l'elemento figlio mantenendo la giusta relazione genitore-figlio - jquery, html, css, parent-child

Ho fatto un div che ha figli e quellianche i bambini hanno figli. Voglio che quando l'utente fa clic sul pulsante "Mostra", verranno visualizzati gli elementi figlio. Allo stesso tempo, il pulsante "Nascondi" verrà impostato al posto del pulsante "Mostra". Se l'utente fa clic sul pulsante "Nascondi", si verificherà l'evento opposto. Posso inserire correttamente il codice jQuery. Ma il problema è che quando qualcuno fa clic sul pulsante "Mostra", mostra tutti gli elementi figli e gli elementi figlio di un bambino. Ma, voglio che se l'utente fa clic sul pulsante "Mostra" sull'elemento "A", aprirà solo il figlio di A, se fa clic sul pulsante "Mostra" sul figlio di A, solo allora A " il bambino di s figlio dovrebbe essere apparso.

Ecco il mio esempio di lavoro: http://jsfiddle.net/learner73/PcNu2/

<div class="box">
<ul>
<li>
<div class="row">
<p class="left">A</p>
<a href="#" class="right showButton">Show</a>
<a href="#" class="right hideButton">Hide</a>
</div>
<ul class="child">
<li>
<div class="row">
<p class="left">- A"s Child 1</p>
<a href="#" class="right showButton">Show</a>
<a href="#" class="right hideButton">Hide</a>
</div>
<ul class="child child2">
<li>
<div class="row">
<p class="left">- A"s Child 1"s child 1</p>
</div>
</li>
<li>
<div class="row">
<p class="left">- A"s Child 1"s child 2</p>
</div>
</li>
</ul>
</li>
<li>
<div class="row">
<p class="left">- A"s Child 2</p>
<a href="#" class="right showButton">Show</a>
<a href="#" class="right hideButton">Hide</a>
</div>
<ul class="child child2">
<li>
<div class="row">
<p class="left">- A"s Child 2"s child 1</p>
</div>
</li>
<li>
<div class="row">
<p class="left">- A"s Child 2"s child 2</p>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div class="row">
<p class="left">B</p>
<a href="#" class="right showButton">Show</a>
<a href="#" class="right hideButton">Hide</a>
</div>
<ul class="child">
<li>
<div class="row">
<p class="left">- B"s Child 1</p>
</div>
</li>
</ul>
</li>
</ul>
</div>

risposte:

Vorrei utilizzare solo un pulsante in ogni livello e aggiornare di conseguenza: http://jsfiddle.net/sbritton/J6c3z/

<div class="box">
<ul>
<li>
<div class="row">
<p class="left">A</p>
<a href="#" class="right showButton">Show</a>
</div>
<ul class="child">
<li>
<div class="row">
<p class="left">- A"s Child 1</p>
<a href="#" class="right showButton">Show</a>
</div>
<ul class="child child2">
<li>
<div class="row">
<p class="left">- A"s Child 1"s child 1</p>
</div>
</li>
<li>
<div class="row">
<p class="left">- A"s Child 1"s child 2</p>
</div>
</li>
</ul>
</li>
<li>
<div class="row">
<p class="left">- A"s Child 2</p>
<a href="#" class="right showButton">Show</a>
</div>
<ul class="child child2">
<li>
<div class="row">
<p class="left">- A"s Child 2"s child 1</p>
</div>
</li>
<li>
<div class="row">
<p class="left">- A"s Child 2"s child 2</p>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div class="row">
<p class="left">B</p>
<a href="#" class="right showButton">Show</a>
</div>
<ul class="child">
<li>
<div class="row">
<p class="left">- B"s Child 1</p>
</div>
</li>
</ul>
</li>
</ul>
</div>


$(".box").on("click",".showButton", function(){
$(this).parent().next("ul.child").show();
$(this).removeClass("showButton").addClass("hideButton").text("Hide");

});

$(".box").on("click",".hideButton", function(){
$(this).closest("li").find(".child").hide();
$(this).closest("li").find(".hideButton").removeClass("hideButton").addClass("showButton").text("Show");
});