个人中心
gpt4 book ai didi

javascript - 隐藏菜单outclick

转载 作者：塔克拉玛干 更新时间：2023-11-02 21:13:21 25 4
gpt4 key购买 nike

<分区>

我正在为响应式网站编写菜单，但一瞬间我惊呆了——点击时隐藏菜单...我非常感谢对我有问题的 jQuery 的任何帮助:) - link to jsfiddle 

function hamburgerClick()
{
	$('#hamburgerMenu').click(function(e) // (hide || show) menu by clicking "hamburgerMenu" icon
	{
		e.preventDefault();

		if( $('#hamburgerMenu').hasClass('is-active') )
		{
			$('#hamburgerMenu').removeClass('is-active');
			$('#menu').removeClass('is-active');
		}
		else
		{
			$('#hamburgerMenu').addClass('is-active');
			$('#menu').addClass('is-active');
		}
	});
}


function hideMenuOutclick() /* does not work */
{
	if( $('#hamburgerMenu').hasClass('is-active') )
	{
		$(document).click(function(e)
		{
			if( ($(e.target).closest('#menu').length!==0) ||
			    ($(e.target).closest('#hamburgerMenu').length!==0) )
				{
					$('#hamburgerMenu').removeClass('is-active');
					$('#menu').removeClass('is-active');
				}
		});
	}
}



function beginJS()
{
	hamburgerClick();
	hideMenuOutclick();
	/* few more scripts */
}

window.onload = beginJS;
.bg-red
{
	background-color: #e32624;
}
/********** pure header **********/
#header
{
	width: 100%;
	height: 56px;
	display: block;
	position: fixed;
}
/********** fixing Comission **********/
.fixingComission
{
	display: block;
	float: right;
	position: relative;
	width: auto;
	height: 56px;
	appearance: none;
	box-shadow: none;
	border-radius: none;
	background-color: #e32624;
	transition: background 0.3s;
}
.fixingComission a
{
	font-size: 26px;
	color: #ffffff;
	padding: 10px 12px;
}
/********** hamburger button **********/
#hamburgerMenu
{
	display: block;
	float: left;
	position: relative;
	overflow: hidden;
	width: 56px;
	height: 56px;
	font-size: 0;
	text-indent: -9999px;
	appearance: none;
	box-shadow: none;
	border-radius: none;
	cursor: pointer;
	background-color: #e32624;
	transition: background 0.3s;
}
#hamburgerMenu:focus
{
	outline: none;
}
/********** hamburger button span **********/
#hamburgerMenu span
{
	display: block;
	position: absolute;
	top: 25px;
	left: 12px;
	right: 12px;
	height: 5px;
	background: white;
	transition: transform 0.3s;
}
#hamburgerMenu span::before,
#hamburgerMenu span::after
{
	position: absolute;
	display: block;
	left: 0;
	width: 100%;
	height: 5px;
	background-color: #fff;
	content: "";
}
#hamburgerMenu span::before
{
  top: -14px;
  transform-origin: top right;
  transition: transform 0.3s, width 0.3s, top 0.3s;
}
#hamburgerMenu span::after
{
  bottom: -14px;
  transform-origin: bottom right;
  transition: transform 0.3s, width 0.3s, bottom 0.3s;
}
#hamburgerMenu span:focus
{
	outline: none;
}
/********** hamburger button active - class added onclick by JS **********/
#hamburgerMenu.is-active
{
	background-color: #bc1a18;
}
/********** hamburger button span active **********/
#hamburgerMenu.is-active span
{
  transform: rotate(180deg);
}
#hamburgerMenu.is-active span::before,
#hamburgerMenu.is-active span::after
{
  width: 50%;
}
#hamburgerMenu.is-active span::before
{
  top: 0;
  transform: translateX(22px) translateY(2px) rotate(45deg);
}
#hamburgerMenu.is-active span::after
{
  bottom: 0;
  transform: translateX(22px) translateY(-2px) rotate(-45deg);
}
/********** navigation **********/
#menu
{
	display: block;
	position: fixed;
	z-index: 1000;
	background-color: #003e78;
	
	overflow: hidden;
	-webknit-overflow-scroll: touch; /* for mobile safari */
	
	top: 56px;
	width: 65%;
	height: 100%;
	left: -65%;
	transition-property: opacity, left;
	transition-duration: 0.3s, 0.5s;
}
#menu.is-active
{
	left: 0;
}
#menu ul
{
	overflow: auto;
	width: 100%;
	height: 100%;
	padding-right: 0; /* exact value is given by JS to hide scrollbar */
}
#menu ul::-webkit-scrollbar
{
    display: none; 
}
#menu ul li
{
	display: inline-block;
	width: 100%;
	height: 52px;
}
#menu ul li.current,
#menu ul li:hover,
#menu ul li:active
{
	background-color: #0066c5;
}
#menu ul li a
{
	display: block;
	height: 30px;
	width: 100%;
	color: #ffffff;
	font-size: 1em;
	padding: 12px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<header id="header" class="bg-red">
		
		<button class="fixingComission">
			<a href="index-5.html">Zleć naprawę</a>
		</button>
		
		<button id="hamburgerMenu"><span>toggle menu</span></button>
		
		<nav id="menu">
			<ul>
				<li class="current"><a href="index.html">Start</a></li>
				<li><a href="index-1.html">O nas</a></li>
				<li><a href="index-2.html">Serwis</a></li>
				<li><a href="index-3.html">W sumie to nie wiem</a></li>
				<li><a href="index-4.html">Kontakt</a></li>
				<li><a href="index-5.html">Zleć naprawę</a></li>
			</ul>
		</nav>
		
	</header>

//hamburgerClick 正常工作，但 hideMenuOutclick 不工作。

我知道，在 jsfiddle 元素上无法正常工作，但它可以在本地主机和 srv 上使用已实现的 jQuery v1.10.2

如果能提供有关在 CSS3 中滚动的提示，我将不胜感激:

为什么尽管“溢出:自动”'$("#menu").onMouseOver' 仍在滚动整个页面？是否可以强制滚动某些元素(即使它在计算机屏幕上全屏显示)，而不是整个页面？

编辑: 隐藏菜单是通过点击事件完成的(它将匹配无效项并且不会被点击 - 非常感谢指出这一点!)现在唯一的事情就是滚动 :)

25 4 0
文章推荐： javascript - 如何为 ajax/json 响应设置动画？
文章推荐： javascript - 具有动态名称的嵌套对象属性
文章推荐： ios - GMSServices GMSGeocoder reverseGeocodeCoordinate IOS返回结果的语言
文章推荐： javascript - D3 : Using a closure to update a selection without re-binding data