点击任意位置以删除类

Question

这是示例代码: http://codepen.io/vincentccw/pen/loAwu 基本上我想做的是使用div按钮来创建自定义下拉列表，但用select标签替换它。

我的问题是，一旦我点击div，自定义类将被添加(下拉列表出现)，但第二次再点击任何其他地方时，我希望删除该类，从而回到原始状态。 我该怎么做？

$(function(){ 

$(".dButton").click(function(){
   $("div ul.customDropDownList").addClass("clickButtonReveal");
});     
$('body').click(function(){
if( $("div ul.customDropDownList").hasClass("clickButtonReveal") ){
      alert("remove class");
      $("div ul.customDropDownList").removeClass("clickButtonReveal");
      };
    });
}); 

目前，点击功能将同时触发...

- Vincent Chua

---

你能清楚地解释一下吗？我无法理解你的意思。 - Mahesh.D

Answer 1

您可以在按钮点击事件上停止事件传播：

$(".dButton").click(function (e) {
    e.stopPropagation();
    $("div ul.customDropDownList").addClass("clickButtonReveal");

});

- A. Wolff

Answer 2

试试这个

$(".dButton").click(function (e) {
    e.stopPropagation();
    $("div ul.customDropDownList").addClass("clickButtonReveal");

});

以下内容已更新：

获取更多信息

- Mahesh.D

---

我已经使其正常工作了，但是你能解释一下e.stopPropagation()如何工作吗？ 我理解stopPropagation是为了防止事件冒泡到dom树上，但这仍然不能解释它是如何工作的。 - Vincent Chua

是的，您介意解释一下这个代码为什么有效吗？谢谢！ - Con Antonakos

Answer 3

您可以尝试以下方法并检查您点击目标的ID：

HTML：

<div id="test">

</div>

CSS：

#test{
    background-color:red;
    width:200px;
    height:200px;
}

JavaScript：

$(document).ready(function(){
    $(document).click(function(e){
       if(e.target.id == 'test')
       {
           alert('Red box clicked!');
       }
       else
       {
           alert('Clicked something else');
       }
    })
})

这里有一个工作示例： http://jsfiddle.net/JXZhP/

- 0x_Anakin

Answer 4

使用jQuery的one()函数，当用户在页面的任何位置单击时，删除您需要删除的任何内容。 one()仅触发一次...因此请将您的代码更改为：

$(".dButton").click(function(){
  $("div ul.customDropDownList").addClass("clickButtonReveal");
  $('body').one(function(){
    $("div ul.customDropDownList").removeClass("clickButtonReveal")
  });
}); 

如果不清楚的话：请在您的代码中删除第二个函数$('body').click(function(){...})，这将替换掉您所有的代码。

- Precastic

---

最好将 $("div ul.customDropDownList") 的值缓存起来，以后再次使用。DOM遍历是很耗费资源的 :) - sv_in

@sv_in 这只是为了展示概念，我相信还有很多其他的代码；但是没错，你是对的 ;P - Precastic

我刚刚添加了一个注释，为像他这样的初学者提供有关元素缓存的信息。我见过很多人不知道这个简单的东西。 - sv_in