jQuery – Cách thêm class và xóa class nếu nhấp bên ngoài div cùng với nút toggle mở hoặc đóng

Mình có một nút hamburger, khi được nhấp vào, đồng thời thêm một class vào div và nút. Mình đã thêm thành công sự kiện nhấp chuột để đóng div nếu người dùng nhấp vào bất kỳ đâu bên ngoài div nhưng đồng thời mình cũng muốn nút hamburger thêm hoặc xóa class. Kết quả mong muốn là cả hai tùy chọn (nhấp vào nút hoặc nhấp vào bên ngoài bảng điều khiển).

<ul class="nav nav--right">
  <li class="v-button--slide-right" id="toggle-menu">
    <button class="mpp-menu-icon mpp-menu-icon--cross toggle-menu">
      <span class="toggle"></span>
      <span class="menu">menu</span>
    </button>
  </li>
</ul>

<nav id="menu--slide-right" class="nav menu--slide-right">
  <ul class="main-menu">
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav><!-- end slide menu -->

Cách khắc phục rất đơn giản – thêm một biến “open” thay đổi thành true khi thanh bên mở ra và đánh giá biến này trong trình xử lý sự kiện nhấp chuột của bạn.

Thêm biến:

var open = false;

Thêm các trình đột biến biến vào các hàm chức năng mở và đóng của bạn:

var openSidebar = function(){
    $('.menu--slide-right').addClass('is-active');
    $('.toggle-menu').addClass('is-active');
    $('#toggle-menu').addClass('toggle-close');
    open = true; //This is the new part!
}

Sau đó, chuyển đổi chức năng để gọi khi nhấp vào nút

$('.toggle-menu').click( function(event) {
    event.stopPropagation();
    var toggle = open ? closeSidebar : openSidebar;
    toggle();
});

Đoạn code hoàn chỉnh

jQuery(document).ready(function ($) {
            var open = false;
var openSidebar = function(){
    $('.menu--slide-right').addClass('is-active');
    $('.toggle-menu').addClass('is-active');
    $('#toggle-menu').addClass('toggle-close');
    open = true; //This is the new part!
}
    var closeSidebar = function() {
        $('.menu--slide-right').removeClass('is-active');
        $('.toggle-menu').removeClass('is-active');
        $('#toggle-menu').removeClass('toggle-close');
open = false;
    }

$('.toggle-menu').click( function(event) {
    event.stopPropagation();
    var toggle = open ? closeSidebar : openSidebar;
    toggle();
});

            $(document).click(function (event) {
                if (!$(event.target).closest('.menu--slide-right').length) {
                    closeSearchMobile();
                }
            });
});

Xem trên Fiddle. Chúc các bạn thành công!

Đã đăng trong Boostrap, Code Snippets, CSS, Javascript và được gắn thẻ , .