Javascript jQuery在单选按钮上显示隐藏div

我有一组单选按钮，点击时需要显示相应的无序列表。我已经根据单击的单选按钮显示了正确的列表，但无法确定如何隐藏其他需要隐藏的列表。因此，如果我单击第二个福利收音机，则第二个“支出”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>

但这产生了一个坏结果，所有的列表都被隐藏了

---

提前感谢。

这将隐藏当前可见的。。（您应该在显示新单击的

ul

之前运行它）

---

这将隐藏当前可见的。。（您应该在显示新单击的

ul

之前运行它）

---

谢谢。我用以下方法解决了这个问题：

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

---

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

谢谢。我用以下方法解决了这个问题：

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

---

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

我以前在人们编码时看到过这种症状——我总是告诉他们，除非你删除了所有不需要的东西，否则你的代码不是真正完整的。（我自己也这么做：）。要保持第一个可见，您仍然可以将其保留在一行中：

$（'div.chevron>ul:visible'）。而不是（':first'）.hide（）

我以前在人们的编码中看到过这种症状——我总是告诉他们，除非你删除了所有不需要的东西，否则你的代码是不完整的。（我自己也这么做：）。要保持第一个可见，您仍然可以将其保留在一行中：

$（'div.chevron>ul:visible'）。而不是（':first'）.hide（）
        $('div.chevron > ul:visible').hide();
    $('div.chevron > ul:first').show();
    $('div.chevron > ul').eq($radioClick).show();