如何在单击时向div添加类，并通过单击页面上的其他位置删除该类

Question

I would like to expand a div, filters , when filtertoggle is clicked. I would like to do this by adding the class on to filters . Then, when the user clicks anywhere else on the page, I would like to remove the on class, thereby closing filters .

Here is the code I have attempted:

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;
  });

As it stands, filters does not open.

Answer 1

Your logic has a couple of issues. Firstly, evt.target is an Element object, not a jQuery object, so it has not attr() method. You need to wrap it in a jQuery object to make that work. Then you can use hasClass() to check what class is on the target .

Also a jQuery object has no element property, so element.className will cause a syntax error. You can just use removeClass() in that case. Try this:

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

You should also note that it may be possible to achieve this in CSS alone, depending on how your HTML is structured. You can use the :focus selector to do it, like this:

 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>