点击在屏幕任意位置删除

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

你可以简化你的逻辑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 -->

Answer 2

您可以添加一个单击处理文档对象添加非活性类

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