Question

示例代码在这里： http://codepen.io/vincentccw/pen/loAwu

基本上我想要做的是使用tag但可替换的div按钮创建自定义下拉列表。

我的问题是，一旦我点击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");
      };
    });
});

现在两个点击功能都会同时触发....

Answer 1

您可以在点击按钮时停止传播：

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

});

Answer 2

尝试this

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

});

以下内容更新：

了解更多info

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/

Answer 4

当用户点击页面正文的任意位置时，使用jQuery one（）函数删除您需要删除的内容。 one（）只触发一次...所以将代码更改为：

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

以防不清楚：删除代码中的第二个函数$('body').click(function(){...})。这取代了你的所有代码。

单击任意位置以删除类

4 个答案: