jquery - 列表需要双击切换一个类

Question

请参阅此小提琴：http: //jsfiddle.net/toroncino/7Yag9/2/

为什么如果我单击该行没有任何反应？

我需要双击以突出显示该元素。

仅当我单击右侧的选择时才有效。

感谢帮助。

Answer 1

如果你去掉这行 CSS，只需要单击一下 :)

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

小提琴在这里更新。

实际上，您可以将线路留在其中，但只需删除display:block;它即可。

编辑：您也可以只取出<label>and</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第一次单击应用该类，但第二次单击事件select（反过来又冒泡到li单击事件）删除该类。添加return false选择的click事件可以完成这项工作。我也更新了小提琴http://jsfiddle.net/7Yag9/9/。

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


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