基于单选按钮切换 div答案

【问题标题】：Toggling div based on radiobutton基于单选按钮切换 div
【发布时间】：2012-06-01 17:38:36
【问题描述】：

嗨，我只需要解开我的 jQuery。

如果选中单选按钮，我需要在单选按钮之后显示下一个 div。并隐藏其他所有内容。

这是我的html：

<div class="radio-perk">
    <input class="perkdrop" id="tab1" type="radio" name="amount" value="250">
    <label for="tab1">10 frames</label>
</div>   // I added this as it seemed to be missing @ManseUK
<div id="tabs-250" class="dropdown">
    <p>2131</p>
</div>
<div class="radio-perk">
    <input class="perkdrop" id="tab2" type="radio" name="amount" value="400">
    <label for="tab2">1 sekund, DVD</label>
</div>
<div id="tabs-400" class="dropdown">
    <p>123</p>
</div>
<div class="radio-perk">
    <input class="perkdrop" id="tab3" type="radio" name="amount" value="600">
    <label for="tab3">Invitasjon Wrapfest</label>
</div>
<div id="tabs-600" class="dropdown">
    <p>2342</p>
</div>
<div class="radio-perk">
    <input class="perkdrop" id="tab4" type="radio" name="amount" value="900">
    <label for="tab4">Invitasjon f&oslash;rpremiere</label>
</div>
<div id="tabs-900" class="dropdown">
    <p>223</p>
</div>
<div class="radio-perk">
    <input class="perkdrop" id="tab5" type="radio" name="amount" value="1200">
    <label for="tab5">En dag p&aring; settet</label>
</div>
<div id="tabs-1200" class="dropdown">
    <p>23132</p>
</div>
<div class="radio-perk">
    <input class="perkdrop" id="tab6" type="radio" name="amount" value="1600">
    <label for="tab6">To dager p&aring; settet</label>
</div>
<div id="tabs-1600" class="dropdown">
    <p>23123</p>
</div>
<div class="radio-perk">
    <input class="perkdrop" id="tab7" type="radio" name="amount" value="2500">
    <label for="tab7">Assosiate Producer</label>
</div>
<div id="tabs-2500" class="dropdown">
    <p>23312</p>
</div>

到目前为止，这是我的 jQuery：

$(".perkdrop").change(function () {
    if ($(this).is(':checked')) {
        $(this).next("div").slideToggle("normal");
    }
});

这是我的相关css：

.dropdown {
   display: none;
}

我不明白为什么我可以选择下一个 div 项？我如何让其他一切都关闭？任何帮助表示赞赏

【问题讨论】：

我已经更新了您问题中的代码，因为您在第一个input 之后缺少</div> ...这是正确的还是在实际的HTML 中真的缺少</div>？
我放错了一个 div 标签。由于过去的实验，谢谢:)

标签： jquery forms radio-button jquery-animate

【解决方案1】：

尝试如下，

$(".perkdrop").change(function() {
    $('.dropdown').slideUp();
    if ($(this).is(':checked')) {
        $(this).parent().next().slideToggle("normal");
    }
});

我还认为你搞砸了第一组 div（结构与其他组不同）。我认为不是这样的。

http://jsfiddle.net/DBexG/2/

【讨论】：

他没有错过</div>，他有奇怪的标记。对于第一个节点我们需要使用siblings()，对于其他节点——parent().next()...o_O
@VisioN 我刚刚纠正了在 OPs 问题中认为这是一个错误......将回滚更改......
无需回滚。 :) 这是之前实验中放错位置的 div。
这行得通，谢谢:) 我仍然面临的唯一问题是，当我在 div 中有多行文本时，动画会在最后跳转。有什么解决办法吗？ :) 谢谢顺便说一句，我会在 2 分钟内接受（限制）。

【解决方案2】：

.next() 函数在 DOM 中查找与 jQuery 对象中的其他元素处于同一级别的元素。由于您的单选按钮位于 div 内，因此您实际上想要执行以下操作：

$(this).parent().next('div').slideToggle('normal');

要关闭所有其他 div，您可以使用标准类选择器在该行之前选择它们，然后选择 .slideUp() 或 .hide()，具体取决于您是否要为关闭设置动画。完整的东西看起来像这样：

$(".perkdrop").change(function() {
    if(this.checked)  {
        $('.dropdown').slideUp();
        $(this).next("div").slideToggle("normal");
    }
});

【讨论】：

【解决方案3】：

.next() 只搜索兄弟姐妹...试试这个

$(".perkdrop").change(function() {
    $(".dropdown").slideUp('normal');  // slide up all open divs
    if ($(this).is(':checked')) {
        // get parent (div) then next DOM element with class "dropdown"
        $(this).parent().next('.dropdown').slideToggle("normal");
    }
});

Working Example

【讨论】：

【解决方案4】：

试试这个

 $(".perkdrop").change(function() {
    $('.dropdown').hide();
    if ($(this).is(':checked')) {
        $(this).parent().next(".dropdown").slideToggle("normal");
    }

 });

Working Fiddle

【讨论】：