点击屏幕上的任意位置即可删除课程

Question

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

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

Answer 1

您可以向文档对象添加单击处理程序以添加非活动类

$('.btn').click(function() {
  var $pane = $(this).closest('.btn-container').find('.pane')
  $pane.toggleClass('inactive');
  if (!$pane.hasClass('inactive')) {
    $('.btn-container .pane:not(.inactive)').not($pane).addClass('inactive');
  }
});

$(document).click(function(e) {
  if (!$(e.target).closest('.btn').length) {
    $('.btn-container .pane:not(.inactive)').addClass('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  -->

Answer 2

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

＆＃13;

＆＃13;

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

＆＃13;

.inactive {
  visibility: hidden;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;