0

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

4

4 回答 4

3

尝试如下，

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

另外我认为你搞砸了第一个组 div （结构与其他组不同）。我认为并非如此。

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

于 2012-06-01T17:44:31.033 回答
0

试试这个

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

 });​

工作小提琴

于 2012-06-01T17:42:37.333 回答
0

该.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");
    }
});
于 2012-06-01T17:43:19.753 回答
0

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

工作示例

于 2012-06-01T17:43:37.760 回答