jquery - クラスを切り替えるには、リストをダブルクリックする必要があります

Question

このフィドルを参照してください：http：//jsfiddle.net/toroncino/7Yag9/2/

行をクリックしても何も起こらないのはなぜですか？

要素を強調表示するには、ダブルクリックする必要があります。

右側の選択をクリックした場合にのみ機能します。

手伝ってくれてありがとう。

Answer 1

このCSS行を削除すると、ワンクリックで済みます:)

label{color:#777;padding-top:2px;display:block;}

フィドルはここで更新されます。

実際、行をそのままにしておくことはできますが、を削除するだけdisplay:block;で機能します。

<label>編集：タグとタグを取り出して</label>CSSをに置く<span>か、に変更する<span>text</span>こともできます<label>text</label>。

Answer 2

あなたが逃した$：

$(function() {

selectタグのラッピングlabelは無効です：

これらを変更します。

   <li>
        <label>
            <span>text</span>
            <select>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
        </label>
    </li>

に：

    <li>
        <label>text</label>
            <select>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
    </li>

デモ

Answer 3

をクリックするliと、 のclickイベントselectも発生するためです。最初のクリックでクラスが適用されますが、2 回目のクリック イベントselect(クリック イベントにバブルが発生li) でクラスが削除されます。return false選択のイベントに追加するとclick、仕事ができます。フィドルも更新しましたhttp://jsfiddle.net/7Yag9/9/。

$('li').on("click", function() {    
    $(this).toggleClass('sel');
});


$("select").on("click", function() {
    return false;
});​