jQuery在單選按鈕上顯示隱藏div

Question

我有一組單選按鈕，單擊它們時需要顯示相應的無序列表。 我已經根據單擊哪個單選按鈕顯示了正確的列表，但是無法弄清楚如何隱藏其他需要隱藏的列表。 因此，如果我單擊第二個好處收音機，則將顯示第二個“支出” ul，而其他“支出” ul將隱藏。

這是我的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();

我不知道它是什么，但是當答案很簡單時，我似乎總是在代碼中使這種事情變得過於復雜。