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

この.next()関数は、jQuery オブジェクト内の他の要素と同じレベルの DOM で要素を探します。ラジオ ボタンは 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 に答える
0

これを試して

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

 });​

働くフィドル

于 2012-06-01T17:42:37.333 に答える