0

ユーザーがラジオオプションを選択したときに、jqueryを使用して詳細情報を表示/非表示にしています。これは単純な概念です。ユーザーが<dt>タグ内をクリックすると（つまり、<input>または<label>のいずれかをクリックすると）、<dd>がスライドし、開いたままになって詳細情報が表示されます。<dt>タグ内をクリックすると、<dd>が閉じます。

私は過去にこの表示/非表示スクリプトを正常に使用しましたが、入力タグまたはラベルタグを含めたことはありません。for =パラメーターを使用してラベルを追加すると、次の問題が発生します。

ラジオをクリックすると、スライドは正常に開き、開いたままになりますが、ラベル領域をクリックすると、スライドが開き、すぐにバウンスして閉じます。デバッグしようとしたときに、ラジオボタンの正しいIDと一致しないようにfor =を変更または削除した場合（たとえば、<input type = "radio" id = "option01"> <label for = "">）、スライドが開いたり閉じたりすることはなくなりますが、残念ながら、for=を削除することでアクセシビリティを犠牲にすることになります。

この構造を維持すること、またはそれに近いこと、そしてバウンスクローズ効果に対処しないことについて何か考えはありますか？

$(document).ready(function() {
   $('.serviceOption').find('dd').hide().end().find('dt').click(function() {
    var moreInfo = $(this).next();
    if (moreInfo.is(':visible')) {
        moreInfo.slideUp();
    } else {
        moreInfo.slideDown('slow');
    }
   });
});

<dl class="serviceOption">  
    <dt>
        <input type="radio" name="serviceOptions" id="option01" value="value01">
        <label for="option01">Option 1</label>
    </dt>  
    <dd>Show more information on Option 1</dd>
    <dt>
        <input type="radio" name="serviceOptions" id="option02" value="value02">
        <label for="option02">Option 2</label>
    </dt>
    <dd>Show more information on Option 2</dd>
</dl>

これがjsFiddleの例です。

http://jsfiddle.net/8JjvT/

ddラジオボタンをクリックすると、正しく開閉します。ラベルをクリックして問題を確認してください。すぐに開閉します。

4

1 に答える 1

1

わかりました、私は正直に立っています：どうやら、for =のラベルには、クリックイベントに問題があります！

この回答を参照してください：ラベルをクリックすると、jQueryClickが2回起動します

さて、それを考慮に入れて、決定を下す必要があります...それを正しく機能させる唯一の方法は、クリックイベントをdtではなく入力フィールドにバインドすることでした。

これが私のフィドルです：http：//jsfiddle.net/mori57/X9pNY/

// get all the input items from the dt's
var terms = $(".serviceOption dt input");
// attach a click handler, pass in the event
terms.click(function (evt) {
    // store the clicked item's closest dt
    var clickedDT = $(this).closest("dt");
    // if there are visible dd's
    if ($("dd:visible").length > 0) {
        // hide them
        $("dd:visible").slideUp(400, function () {
            // May not need to put this inside the callback, 
            // now that I know it was label's fault
            $(clickedDT).next("dd").slideDown();
        });
    } else {
        // otherwise, just show the nearest dd
        $(clickedDT).next("dd").slideDown();
    }
});
于 2013-02-01T17:01:54.787 に答える