单击屏幕上的任意位置以删除课程 [英] click anywhere on the screen to remove class

问题描述

我有几个下拉菜单，其中在选择按钮时添加了添加和删除类

I have several drop-down menus where i have added an add and remove class when the button is selected

JSFIDDLE

我想为此做一个小功能，以便当用户在屏幕上单击任意位置时，该类将被删除...

I would like to do a small function to this so when the user click anywhere on the screen the class is removed ...

$('.btn').click(function(){
    var $pane = $(this).closest('.btn-container').find('.pane');
    if ($pane.hasClass('inactive')) {
        $('.btn-container .pane').addClass('inactive');
        $pane.removeClass('inactive');
    } else {
        $pane.addClass('inactive');
    }
});

推荐答案

您可以将逻辑绑定单击事件简化为document，并使用以下逻辑切换inactive类:

You could simplify your logic binding click event to document and using following logic to toggle the inactive class:

$(document).click(function(e) {
  var $pane = $(e.target).closest('.btn-container').find('.pane');
  $pane.add($('.pane:not(.inactive)')).toggleClass('inactive');
});

.inactive {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
here
<div class="btn-container menu small-4 medium-2">
  <a class="inline-block btn no-text-trans">sector</a>
  <i class="fa fa-chevron-down"></i>
  <article class="pane inactive">
    <nav>
      <ul>
        <li><a href="#">Menu 1</a>
        </li>
        <li><a href="#">Menu 1</a>
        </li>
        <li><a href="#">Menu 1</a>
        </li>
        <li><a href="#">Menu 1</a>
        </li>
      </ul>
    </nav>
  </article>
  <!-- PANE ENDS HERE -->
</div>
<!-- BTN CONTAINER ENDS HERE  -->


<div class="btn-container menu small-4 medium-2">
  <a class="inline-block btn no-text-trans">products</a>
  <i class="fa fa-chevron-down"></i>
  <article class="pane inactive">
    <nav>
      <ul>
        <li>
          <a href="#">
            <p>Menu 1</p>
          </a>
        </li>
        <li>
          <a href="#">
            <p>Menu 1</p>
          </a>
        </li>
        <li>
          <a href="#">
            <p>Menu 1</p>
          </a>
        </li>
        <li>
          <a href="#">
            <p>Menu 1</p>
          </a>
        </li>
      </ul>
    </nav>
  </article>
  <!-- PANE ENDS HERE -->
</div>
<!-- BTN CONTAINER ENDS HERE  -->

这篇关于单击屏幕上的任意位置以删除课程的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！