我想將兩個腳本合二為一

Question

我正在使用 jQuery toggleClass 切換 CSS。

$ (".test").click(function () {
    $(this).toggleClass('active');
});

如果我單擊 Bootstrap 中的菜單以外的菜單，則菜單將被隱藏。 在菜單外單擊時，我還想切換類（“活動”） 。

$(document).click(function (event) {
   if (!$(event.target).is('.navbar-collapse *')) {
    $('.navbar-collapse').collapse('hide');
  }
});

可以是一個腳本嗎？ 或者我可以在if之后激活兩個功能嗎？ 請幫幫我，謝謝。

Answer 1

主要問題是.test可能是多個項目的類。 您的

$ (".test").click(function () {
    $(this).toggleClass('active');
});

為特定元素切換class ，而如果toggle是您想要的，那么您可以執行以下操作：

 $(".wrapper, .test, .outside-menu").click(function(e) { if ($(this).hasClass("test")) $(this).toggleClass("active").siblings().removeClass("active"); else if ($(this).hasClass("outside-menu")) e.stopPropagation(); else { //This is the wrapper's case //YOUR CODE HERE $(".test").removeClass("active"); } });

 .active { color: green; } .outside-menu { background-color: gray; } html, body, .wrapper { width: 100%; height: 100%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper"> BEFORE MENU <div class="outside-menu"> MENU <div class="test">TEEEEST1</div> <div class="test">TEEEEST2</div> <div class="test">TEEEEST3</div> </div> AFTER MENU </div>