如何在页面任意位置单击时从元素中删除一个类？

Question

如何在页面任意位置单击时从元素中删除一个类？

3

我想在页面上任何地方点击时隐藏一个元素，但不包括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');
});

- rowdy

你可能会发现把这个放到jsfiddle里更容易。这样你就可以更快地调试你已经完成的部分，而其他人也可以提供编辑来帮你修复问题。 - Chris Cousins

为什么不隐藏所有下拉菜单，然后显示所需的那一个？ - Fantasterei

你的代码是否按照预期工作？它具体缺少应该实现的功能，或者存在不该有的行为吗？ - Steve0

我注意到你提供的 JavaScript 代码中的最后一部分 $('.onclick-dropdown.open').removeClass('.open'); 由于前置了一个 .，所以不会移除 open 类。 - Steve0

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- P.S. · Answer 1

在这一行中：

$('.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/

- Shiladitya · Answer 2

这里有一个解决方案 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>