Question

当我单击filters时，我想扩展一个filtertoggle的div。我想通过将类on添加到filters来做到这一点。然后，当用户单击页面上的其他任何位置时，我想删除on类，从而关闭filters。

这是我尝试的代码：

jQuery(document).ready(function($) {

$('body').click(function(evt) {
  if (evt.target.attr('class').includes('filtertoggle')) {
    $(this).toggleClass('on');
    $('.filters').slideToggle(200);
    return;
  } else {
    $(this).element.className = element.className.replace(/\bon\b/g, "");
    return;
  });

按现状，filters不会打开。

Answer 1

您的逻辑有两个问题。首先，evt.target是一个Element对象，而不是jQuery对象，因此它没有attr()方法。您需要将其包装在jQuery对象中才能使其正常工作。然后，您可以使用hasClass()检查target上的课程。

而且jQuery对象没有element属性，因此element.className将导致语法错误。在这种情况下，您只能使用removeClass()。试试这个：

$('body').click(function(evt) {
  if ($(evt.target).hasClass('filtertoggle')) {
    $('.filtertoggle').addClass('on');
    $('.filters').slideToggle(200);
  } else {
    $('.filtertoggle').removeClass('on');
    $('.filters').slideUp(200);
  }
});

body, html { height: 100%; }
.on { color: #C00; }
.filters { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filtertoggle">
  FilterToggle
</div>

<div class="filters">
  Filters...
</div>

您还应该注意，取决于HTML的结构，仅在CSS中就可以实现此目的。您可以使用:focus选择器来做到这一点，就像这样：

body, html { height: 100%; }
.filtertoggle { outline: 0; }
.filters { 
  opacity: 0;
  transition: opacity 0.3s;
}

.filtertoggle:focus { color: #C00; }
.filtertoggle:focus + .filters { opacity: 1; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filtertoggle" tabindex="1">
  FilterToggle
</div>

<div class="filters">
  Filters...
</div>

如何在单击时将类添加到div，以及如何通过单击页面上的其他位置来删除该类

1 个答案: