jQuery show hide divs on radio buttons

Question

У меня есть группа переключателей, которые при нажатии должны отображать соответствующий неупорядоченный список. Я добрался до правильного списка, в соответствии с которым нажат переключатель, но не может понять, как скрыть другие списки, которые необходимо скрыть. Поэтому, если я нажму на второй льготный радиус, тогда будет отображаться вторая «потратить» ul, а остальные «потратить» uls будут скрыты.

Это мой JQuery:

// hide all except first ul 
$('div.chevron ul').not(':first').hide(); 

// 
$('div.chevron > ul > li > input[name=benefits]').live('click',function() { 

    // work out which radio has been clicked 
    var $radioClick = $(this).index('div.chevron > ul > li > input[name=benefits]'); 
    var $radioClick = $radioClick + 1; 

    $('div.chevron > ul').eq($radioClick).show(); 

}); 

// trigger click event to show spend list 
var $defaultRadio = $('div.chevron > ul > li > input:first[name=benefits]') 
$defaultRadio.trigger('click'); 

И это мой HTML:

 <div class="divider chevron"> 
     <ul> 
      <li><strong>What benefit are you most interested in?</strong></li> 
      <li> 
       <input type="radio" class="inlineSpace" name="benefits" id="firstBenefit" value="Dental" checked="checked" /> 
       <label for="firstBenefit">Dental</label> 
      </li> 
      <li> 
       <input type="radio" class="inlineSpace" name="benefits" id="secondBenefit" value="Optical" /> 
       <label for="secondBenefit">Optical</label> 
      </li> 
      <li> 
       <input type="radio" class="inlineSpace" name="benefits" id="thirdBenefit" value="Physiotherapy" /> 
       <label for="thirdBenefit">Physiotherapy, osteopathy, chiropractic, acupuncture</label> 
      </li> 
     </ul> 
     <ul> 
      <li><strong>How much do you spend a year on Dental?</strong></li> 
      <li> 
       <input type="radio" class="inlineSpace" name="spend" id="rate1a" value="£50" /> 
       <label for="rate1a">&pound;50</label> 
      </li> 
      <li> 
       <input type="radio" class="inlineSpace" name="spend" id="rate2a" value="£100" /> 
       <label for="rate2a">&pound;100</label> 
      </li> 
      <li> 
       <input type="radio" class="inlineSpace" name="spend" id="rate3a" value="£150" /> 
       <label for="rate3a">&pound;150</label> 
      </li>   
     </ul> 
     <ul> 
      <li><strong>How much do you spend a year on Optical?</strong></li> 
      <li> 
       <input type="radio" class="inlineSpace" name="spend" id="rate1b" value="£50" /> 
       <label for="rate1a">&pound;50</label> 
      </li> 
      <li> 
       <input type="radio" class="inlineSpace" name="spend" id="rate2b" value="£100" /> 
       <label for="rate2a">&pound;100</label> 
      </li> 
      <li> 
       <input type="radio" class="inlineSpace" name="spend" id="rate3b" value="£150" /> 
       <label for="rate3a">&pound;150</label> 
      </li>   
     </ul> 
     <ul> 
      <li><strong>How much do you spend a year on Physiotherapy, osteopathy, chiropractic, acupuncture?</strong></li> 
      <li> 
       <input type="radio" class="inlineSpace" name="spend" id="rate1c" value="£50" /> 
       <label for="rate1a">&pound;50</label> 
      </li> 
      <li> 
       <input type="radio" class="inlineSpace" name="spend" id="rate2c" value="£100" /> 
       <label for="rate2a">&pound;100</label> 
      </li> 
      <li> 
       <input type="radio" class="inlineSpace" name="spend" id="rate3c" value="£150" /> 
       <label for="rate3a">&pound;150</label> 
      </li>   
     </ul> 
     <label class="button"><input type="submit" value="View your quote" class="submit" /></label> 
    </div> 

Я попытался с помощью:

$('div.chevron > ul').not($radioClick).hide(); 

Но что дали плохой результат, где все списки где скрыто.

Заранее спасибо.

Answer 1

Это скроет видимый в данный момент один .. (вы должны запустить его перед показом вновь щелкнул ul)

$('div.chevron > ul:visible').hide(); 

Answer 2

спасибо. Я решил его:

 $('div.chevron > ul:visible').hide(); 
    $('div.chevron > ul:first').show(); 
    $('div.chevron > ul').eq($radioClick).show(); 

Я не знаю, что это такое, но я всегда кажется более осложняют такие вещи, как это в моем коде, когда ответ очень прост.