jQuery show hide divs單選按鈕

Question

我有一組單選按鈕，點擊時需要顯示相應的無序列表。根據哪個單選按鈕被點擊，我已經儘可能地顯示正確的列表，但不知道如何隱藏需要隱藏的其他列表。所以如果我點擊第二個好處radion然後第二個'花費'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(); 

我不知道它是什麼，但我似乎總是在我的代碼在複雜的這樣的東西時，答案是很容易的。