jquery - 单击屏幕上的任意位置以删除类(class)

我有几个下拉菜单，当选择按钮时，我在其中添加了一个add和remove类
JSFIDDLE
我想做一个小的功能，这样当用户点击屏幕上的任何地方，类被删除。。。

$('.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');
    }
});

最佳答案

您可以将逻辑绑定click事件简化为document并使用以下逻辑切换inactive类：

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

关于jquery - 单击屏幕上的任意位置以删除类(class)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32393774/