Я не уверен, что полностью понимаю ваш вопрос, и трудно дать четкий ответ, когда полный код не предоставлен, НО - похоже, что вы хотите, чтобы произошло следующее:
- Когда пользователь нажимает на триггер .menu, вы хотите, чтобы он последовательно открывал / закрывал боковую панель.
- Когда пользователь нажимает на ссылку из меню, вы хотите закрыть боковую панель.
- Вы не хотите, чтобы пользователь нажимал на саму боковую панель или элементы, которые не являются ссылками, чтобы закрыть боковую панель внутри боковой панели.
- Вы хотите, чтобы пользователь мог щелкнуть в любом месте за пределами боковой панели, чтобы закрыть боковую панель.
- Вы хотите, чтобы перенаправления URL закрывали боковую панель / очистку.
Для # 1 кажется, что вы управляете этой частью с помощью приведенного выше фрагмента кода, который вы включили.
Для # 2, # 3, # 4 вам нужно настроить прослушиватель событий на самом документе, чтобы вы могли фиксировать все клики. Все, что не соответствует вашим критериям для закрытия боковой панели, должно учитываться. Я бы, вероятно, предложил событие mouseup, чтобы у вас была возможность проверить что-то вроде этого:
$( document ).mouseup( function( e ) {
if (
// Not menu trigger.
! $menuTrigger.is( e.target ) &&
// Not sidenav.
! $sideNav.is( e.target ) &&
// Toplevel items.
( ! $( '.menu-item' ).is( e.target ) || $sideNav.has( e.target ).length === 0 ) &&
// Only when menu is closed.
$menuTrigger.hasClass( 'active' )
) {
// Handle close of sidebar.
}
} );
Для # 5 - вы можете прослушивать события unload или beforeunload, чтобы инициировать закрытие меню, когда документ или дочерние ресурсы выгружены, что-то вроде этого:
$( window ).bind( 'beforeunload unload', function() {
// Close open sidebars before navigating away.
} );
Взяв все эти элементы вместе с вашим исходным кодом, вот пример:
$( document ).ready( function() {
var $menuTrigger = $( ".menu-trigger" ),
$sideNav = $( ".side-nav" ),
toggleSidebar = function() {
console.log( 'clicked' );
$menuTrigger.toggleClass( "active" );
$( ".content" ).toggleClass( "overlay" );
$( "body" ).toggleClass( "body-fixed" );
$sideNav.toggleClass( "slide-out" );
};
$menuTrigger.click( () => toggleSidebar() );
// Listen for outside clicks.
$( document ).mouseup( function( e ) {
if (
// Not menu trigger.
! $menuTrigger.is( e.target ) &&
// Not sidenav.
! $sideNav.is( e.target ) &&
// Only toplevel items.
( ! $( '.menu-item' ).is( e.target ) || $sideNav.has( e.target ).length === 0 ) &&
// Only when menu is closed.
$menuTrigger.hasClass( 'active' )
) {
// Toggle sidebar.
toggleSidebar();
}
} );
// Listen for unload before redirected to close menu.
$( window ).bind( 'beforeunload unload', function() {
// Check if sidebar is open.
if ( $menuTrigger.hasClass( 'active' ) ) {
// Toggle sidebar.
toggleSidebar();
}
} );
} );
a {
color: orange !important;
}
.active {
background:red;
}
.side-nav {
background:blue;
width: 30vw;
height: 100vh;
}
.side-nav {
display: none;
padding: 1em;
}
.menu-trigger.active + .side-nav {
display: block;
}
.main-menu {
padding: 0;
list-style-type: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="menu-trigger">menu trigger</button>
<!-- SIDE NAV -->
<nav class="side-nav">
<div class="side-nav-inner">
<ul class="main-menu">
<li class="menu-item">
<a href="#">Home</a>
</li>
<li class="menu-item">
<a href="#">About Us</a>
</li>
<li class="menu-item">
<a href="#">Contact Us</a>
</li>
<li class="menu-item">
<a href="#">Book Now</a>
</li>
</ul>
Это должно помочь вам двигаться в правильном направлении. Я не уверен в CSS, который у вас есть в игре, но он должен предоставить вам достаточно для работы и понимания концепций.