Дерево решений jQuery - Как скрыть вопросы, если они не выбраны?

Question

Я строю простое дерево решений с jQuery. У меня все работает нормально, но я хотел бы добавить немного больше функциональности. В настоящее время у меня есть это:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
<script> 
$(document).ready(function() { 
$('ul').hide(); 

$('h3').css('cursor','pointer'); 

$('h3').click(function(){ 
$('.show').slideToggle('fast');   
}); 

$('ul li a').click(function(){ 
$(this).next('ul').slideToggle('fast'); 
}); 

}); 
</script> 

<h3 class="parent">Is this computer a Mac?</h3> 
<ul class="show"> 
    <li>Does this computer have Windows?</li> 
    <li><a href="#"><strong>YES</strong></a> 
    <ul> 
     <li>Do you use Chrome?</li> 
     <li><a href="#"><strong>YES</strong></a> 
     <ul> 
      <li>Do you like it?</li> 
      <li><a href="#"><strong>YES</strong></a> 
      <ul> 
       <li>Great, Keep Using It!</li> 
      </ul> 
      </li> 
      <li><a href="#"><strong>NO</strong></a> 
      <ul> 
       <li>Try Firefox Maybe... </li> 
      </ul> 
      </li> 
     </ul> 
     </li> 
     <li><a href="#"><strong>NO</strong></a> 
     <ul> 
      <li> You should try it.</li> 
     </ul> 
     </li> 
    </ul> 
</li> 
    <li><a href="#"><strong>NO</strong></a> 
    <ul> 
     <li>Are you using Linux?</li> 
     <li><a href="#"><strong>YES</strong></a> 
     <ul> 
      <li>Do You Like it?</li> 
      <li><a href="#"><strong>YES</strong></a> 
      <ul> 
       <li>Great!</li> 
      </ul> 
      </li> 
      <li><a href="#"><strong>NO</strong></a> 
      <ul> 
       <li>Too Bad...</li> 
      </ul> 
      </li> 
     </ul> 
     </li> 
     <li><a href="#"><strong>NO</strong></a> 
     <ul> 
      <li>Have You Heard of Linux?</li> 
      <li><a href="#"><strong>YES</strong></a> 
      <ul> 
       <li>Great!</li> 
      </ul> 
      </li> 
      <li><a href="#"><strong>NO</strong></a> 
      <ul> 
       <li>Check it out online!</li> 
      </ul> 
      </li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
</ul> 

Например, что я хотел бы, чтобы произошло это, когда пользователь нажимает на YES, то опции не исчезает ... Это происходит каждый раз, когда пользователь нажимает на выбор YES. Это было бы наоборот с NO, YES исчезнет.

Я пробовал некоторые вещи, такие как .next(). Hide(), replaceWith() и т. Д., Но я не могу заставить его работать. Я думал, что Siblings() будет выбором, но это не удалось сразу ...

Любой совет?

Спасибо!

Answer 1

Siblings является правильным Idea, но вам нужно сначала вернуться к li элементу, как вы хотите, чтобы скрыть его братьев и сестер, а не из a элемента ..

Вот рабочий пример: http://www.jsfiddle.net/MxgpT/

я просто добавить в код этого

$('a').click(function(){ 
    $(this).closest('li').siblings(':not(:first-child)').hide(); 
    }); 

Answer 2

Я обновил и упростил код, который появился в ListUI.com пост. Вот самая последняя версия интерактивного решения. http://www.guiideas.com/2013/09/interactive-decision-guide.html