Question

我已经使用查询，html和css构建了侧边栏。当侧边栏被激活并且覆盖显示在其余内容上时，使用溢出：隐藏可防止滚动。基本上，当我单击侧边栏中的链接并被重定向时，当我单击侧面导航仍处于活动/可见状态时，当我单击“喜欢”或单击屏幕上的任意位置时，我希望侧边栏消失。请有人帮忙吗？

$(document).ready(function() {
$menuTrigger = $(".menu-trigger");
$sideNav = $(".side-nav");

$menuTrigger.click(function() {
$(this).toggleClass("active");
$(".content").toggleClass("overlay");
$("body").toggleClass("body-fixed");
$sideNav.toggleClass("slide-out");
});
});

<!-- 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="">Rooms</a>
   </li>
   <li class="menu-item">
     <a href="">Contact Us</a>
   </li>
   <li class="menu-item">
     <a href="">Book Now</a>
   </li>
 </ul>

Answer 1

根据您所询问的声音，您希望关闭叠加层和侧边栏，以便在访问者单击其浏览器的后退按钮时不可见。

在这种情况下，您需要捕获链接上的点击，隐藏叠加层/侧边栏，然后然后将用户重定向到URL。

$(document).ready(function(){
  $(document).on("click",".menu-item a",function(e){
    e.preventDefault();
    $(".content").toggleClass("overlay");
    $("body").toggleClass("body-fixed");
    $sideNav.toggleClass("slide-out");
    location.href = this.href;
  });
});

Answer 2

我不确定我是否完全理解您的问题，但是当没有提供完整代码时，很难给出清晰的答案，但是-听起来您想要发生以下事情：

当用户单击.menu-trigger时，您希望它持续打开/关闭侧边栏。
用户单击菜单中的链接时，您要关闭侧边栏。
您不希望用户单击侧边栏本身，或者不希望非链接项目关闭侧边栏内部的侧边栏。
您希望用户能够单击侧栏之外的任何位置以关闭侧栏。
您要重定向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是什么，但是它应该为您提供足够的知识来使用和理解这些概念。

单击链接时，响应式侧边栏不会关闭

2 个答案: