隐藏菜单outclick

时间：2016-09-19 14:14:45

标签： javascript jquery css3

我正在为响应式网站编写菜单，但我在一瞬间惊呆了 - 外出时隐藏菜单...... 我非常感谢有关jQuery 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项目上不起​​作用，但它适用于localhost和srv，实现了jQuery v1.10.2

我非常感谢有关在CSS3中滚动的提示：

为什么尽管“overflow：auto”'$（“＃menu”）。onMouseOver'仍在滚动整页？是否可以强制滚动某些元素（即使它在计算机屏幕中完全查看），而不是整页？

编辑：隐藏菜单是通过点击事件完成的（将与残障人士匹配，不会点击 - 非常感谢指出这一点！）现在只有这个滚动:)

1 个答案:

答案 0 :(得分：2)

对于jsfiddle错误，问题在于这一行：

if( $('#hamburgerMenu').hasClass('is-active') ) {

如果菜单在文档加载时未激活，则永远不会附加事件处理程序。

updated jsfiddle：这里的错误是：jquery缺失，加载类型：包裹在头部。

我假设您想在菜单外单击时关闭菜单。

对于问题的第二部分，我发现问题与#menu的高度有关：将其从100％更改为50％。

摘录：

＆＃13;
＆＃13; 
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 */
{
  $(document).click(function(e)
                    {
    if( ($(e.target).closest('#menu').length==0) &&
       ($(e.target).closest('#hamburgerMenu').length==0) )
    {
      if( $('#hamburgerMenu').hasClass('is-active') ) {
        $('#hamburgerMenu').removeClass('is-active');
        $('#menu').removeClass('is-active');
      }
    }
  });
}



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

window.onload = beginJS;
＆＃13; 
.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: 50%;
  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;
}
＆＃13; 
<script src="https://code.jquery.com/jquery-1.10.2.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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题