Question

嗨，我只需要解开我的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项目？我怎么把其他一切都关闭？任何帮助表示赞赏

Answer 1

尝试如下，

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

另外我认为你弄乱了第一组div（结构与其他结构不同）。我认为情况并非如此。

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

Answer 2

试试这个

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

 });

Working Fiddle

Answer 3

.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");
    }
});

Answer 4

.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

根据radiobutton切换div

4 个答案: