Question

我有一组单选按钮，单击时需要显示相应的无序列表。我已经根据单击的单选按钮显示正确的列表，但无法弄清楚如何隐藏需要隐藏的其他列表。因此，如果我点击第二个福利辐射，那么第二个'花费'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();

我不知道它是什么，但是当我的答案非常简单时，我似乎总是在我的代码中复杂化这样的东西。

jQuery show radio divs在单选按钮上

2 个答案: