单击页面上的任意位置时如何从元素中删除类？答案

【问题标题】：How to remove a class from an element when click anywhere on the page?单击页面上的任意位置时如何从元素中删除类？
【发布时间】：2017-07-26 17:21:55
【问题描述】：

我试图在单击页面上除 div 之外的任何位置时隐藏一个元素，如果您在 div 上单击时，它应该切换类。

jQuery -

 $('.onclick-dropdown-link').on('click', function(e) {
     e.preventDefault();
     var $this = $(this);
     var id = $this.attr('href');
     $('.onclick-dropdown').not(id).removeClass('open');
     $(id).toggleClass('open');
 });

HTML -

<a class="onclick-dropdown-link" href="#test-div"></a>
<div id="test-div" class="onclick-dropdown">
    <p>Lorem Ipsum<p>
</div>

CSS -

.onclick-dropdown {
    opacity: 0;
    visibility: hidden;
    z-index: 999;
}
.onclick-dropdown.open {
    opacity: 1;
    visibility: visible;
}

已经尝试过以下方法-

$(document).on('click', function() {
    $('.onclick-dropdown').not(id).removeClass('open');
});

$(document).on('click', function() {
    $('.open').not(id).removeClass('open');
});

$('.onclick-dropdown-link').on('click', function() {
       e.stopPropagation(); // This is the preferred method.
return false;  ;
});

$(document).on('click', function() {
    $('.onclick-dropdown.open').removeClass('.open');
});

【问题讨论】：

您可能会发现将其放入 jsfiddle 更容易。您可以更快地调试到目前为止所做的工作，并让人们对其进行编辑以为您解决问题。
为什么不隐藏所有下拉菜单并在显示地址后显示？
你的代码能做任何你想做的事吗？具体是什么不做它应该做的，或者做它不应该做的？
我注意到您提供的 javascript $('.onclick-dropdown.open').removeClass('.open'); 的最后一部分不会删除开放类，因为前面有 .

标签： javascript jquery html css

【解决方案1】：

这里有一个解决方案https://jsfiddle.net/t3y5zo2t/

$('.onclick-dropdown-link').on('click', function(e) {
   e.preventDefault();
   e.stopPropagation();
   var $this = $(this);
   var id = $this.attr('href');
   $('.onclick-dropdown').not(id).removeClass('open');
   $(id).toggleClass('open');
});

$('body:not(.onclick-dropdown-link)').click(function(e){
  $('#test-div').removeClass('open');
});

.onclick-dropdown {
    opacity: 0;
    visibility: hidden;
    z-index: 999;
}
.onclick-dropdown.open {
    opacity: 1;
    visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<a class="onclick-dropdown-link" href="#test-div">test</a>
<div id="test-div" class="onclick-dropdown">
    <p>Lorem Ipsum<p>
</div>
</body>

【讨论】：

【解决方案2】：

在这一行：

$('.onclick-dropdown-link').on('click', function() {
  e.stopPropagation(); // This is the preferred method.
  return false;
});

您忘记将$event 传递给您的函数。它应该是这样的：

$('.onclick-dropdown-link').on('click', function(e) {
  e.stopPropagation(); // This is the preferred method.
  return false;
});

这段代码应该可以工作。

工作小提琴：http://jsfiddle.net/cfgr9/540/

【讨论】：

@rowdy，在我的回答中查看 jsFiddle，它可以工作