列表需要双击切换类

Question

参考该小提琴：http://jsfiddle.net/toroncino/7Yag9/2/

为什么如果我点击该行没有发生？

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

只有当我点击右侧的选择时它才有效。

感谢您的帮助。

Answer 1

如果您删除此行CSS的，只需要点击:)

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

小提琴更新here。

事实上，你可以离开该行，但只是删除display:block;，它的工作原理。

编辑：你也可以只取出<label>和</label>标记，把你的CSS上<span>或更改<span>text</span>到<label>text</label>。

Answer 2

这是因为当您单击li时，select的click事件也被触发。第一次点击应用类，但第二次点击事件select（反过来泡到li点击事件）将删除该类。在选择的click事件中添加return false即可完成此项工作。我已经更新了小提琴http://jsfiddle.net/7Yag9/9/。

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


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

Answer 3

你已经错过了$：

$(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> 

demo