JS，菜单按钮有效，外部链接无效

function transition() {
    var divtran = document.getElementById('mobile_menu');
    if (divtran.style.height == '100vh') 
       divtran.style.height = '0vh'
    else 
       divtran.style.height = '100vh'
}

/*mobile Menu */
.mobilemenu{
	z-index: 21;
	margin-top: -80px;
	margin-right: -7px;
	position:relative;
	width:50px;
	height:40px;
	border: 0px;
	-webkit-transition:background .3s;
	transition:background .3s
}
.mobilemenu span{
	height:-2px;
	top:20px;
	left:10px;
	right:10px;
	position:absolute;
}
.mobilemenu span::after,.mobilemenu span::before{
	position:absolute;
	left:0;
	height: 3px;
	width:100%;
	border-radius: 50px;
	background-color: #232323;
	content:"";
}
.mobilemenu_transition {
	background-color: transparent;
}
/*transition code persec*/
.mobilemenu_transition span{
	-webkit-transition:background 0s .3s;
	transition:background 0s .3s;
}
.mobilemenu_transition span::after,.mobilemenu_transition span::before{
	-webkit-transition-duration:.3s,.3s;
	transition-duration:.3s,.3s;
	-webkit-transition-delay:.3s,0s;
	transition-delay:.3s,0s;
}
.mobilemenu_transition span::before{
	-webkit-transition-property:top,-webkit-transform;
	transition-property:top,transform;
}
.mobilemenu_transition span::after{
	-webkit-transition-property:bottom,-webkit-transform;
	transition-property:bottom,transform;
}
.mobilemenu_transition.act{
	background-color: transparent;
}
.mobilemenu_transition.act span::before{
	-webkit-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg);
}
.mobilemenu_transition.act span::after{
	-webkit-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
#mobile_menu {
	width: 100%;
	height: 0vh;
	position: absolute;
	z-index: 18;
	background-color: orange;
	overflow: hidden; 
	position: fixed;
	background-color: #f3f3f3;
	
	-webkit-transition-duration:.3s,.3s;
	transition-duration:.3s,.3s;
	-webkit-transition-delay:.3s,0s;
	transition-delay:.3s,0s;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
	<div id="mobile_menu">
		<br /><br /><br /><a href="#" onclick="transition()">bottom</a>
	</div>	
	<a href="#"><div class="_menu"><button onClick = "transition()" class="mobilemenu mobilemenu_transition"><span></span></button>
	</div></a>
		    			    			
<script>
  (function() {
    "use strict";
    var toggles = document.querySelectorAll(".mobilemenu");
    for (var i = toggles.length - 1; i >= 0; i--) {
      var toggle = toggles[i];
      toggleHandler(toggle);
    };
    function toggleHandler(toggle) {
      toggle.addEventListener( "click", function(e) {
        e.preventDefault();
        (this.classList.contains("act") === true) ? this.classList.remove("act") : this.classList.add("act");
      });
    }
  })();
</script>
			
		
</body>
</html>

https://github.com/Arxhtects/Css_menu_onepage

上面的菜单代码链接。我似乎无法弄清楚如何获取外部链接，不仅可以关闭单击该行后出现的菜单div，还可以删除菜单类"act"，以便动画恢复到其原始状态。

获取外部链接以关闭出现的菜单div 很容易。但我似乎无法让它删除菜单按钮所做的类"行为"。

所以基本上一旦你点击链接，它就会把X留在那里。我非常感谢任何帮助。提前谢谢你:)

如果我含糊不清，我很抱歉，但有人可以帮忙吗？

function transition() {
       var divtran = document.getElementById('mobile_menu');
       var mobileMenu = document.querySelectorAll(".mobilemenu");
       var menuOpen = false;
       if (divtran.style.height == '100vh') {
           divtran.style.height = '0vh';
           menuOpen = false;
       }
       else {
           divtran.style.height = '100vh'
           menuOpen = true;
       }
       for(var i=0;i<mobileMenu.length;i++){
          if(menuOpen) {
            mobileMenu[i].classList.add("act");
          }
          else {
            mobileMenu[i].classList.remove("act");
          }
       }
}

/*mobile Menu */
.mobilemenu{
	z-index: 21;
	margin-top: -80px;
	margin-right: -7px;
	position:relative;
	width:50px;
	height:40px;
	border: 0px;
	-webkit-transition:background .3s;
	transition:background .3s
}
.mobilemenu span{
	height:-2px;
	top:20px;
	left:10px;
	right:10px;
	position:absolute;
}
.mobilemenu span::after,.mobilemenu span::before{
	position:absolute;
	left:0;
	height: 3px;
	width:100%;
	border-radius: 50px;
	background-color: #232323;
	content:"";
}
.mobilemenu_transition {
	background-color: transparent;
}
/*transition code persec*/
.mobilemenu_transition span{
	-webkit-transition:background 0s .3s;
	transition:background 0s .3s;
}
.mobilemenu_transition span::after,.mobilemenu_transition span::before{
	-webkit-transition-duration:.3s,.3s;
	transition-duration:.3s,.3s;
	-webkit-transition-delay:.3s,0s;
	transition-delay:.3s,0s;
}
.mobilemenu_transition span::before{
	-webkit-transition-property:top,-webkit-transform;
	transition-property:top,transform;
}
.mobilemenu_transition span::after{
	-webkit-transition-property:bottom,-webkit-transform;
	transition-property:bottom,transform;
}
.mobilemenu_transition.act{
	background-color: transparent;
}
.mobilemenu_transition.act span::before{
	-webkit-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg);
}
.mobilemenu_transition.act span::after{
	-webkit-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
#mobile_menu {
	width: 100%;
	height: 0vh;
	position: absolute;
	z-index: 18;
	background-color: orange;
	overflow: hidden; 
	position: fixed;
	background-color: #f3f3f3;
	
	-webkit-transition-duration:.3s,.3s;
	transition-duration:.3s,.3s;
	-webkit-transition-delay:.3s,0s;
	transition-delay:.3s,0s;
}

<!DOCTYPE html>
<html lang="en">
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
		<div id="mobile_menu">
			<br /><br /><br /><a href="#" onclick="transition()">bottom</a>
		</div>	
			<a href="#"><div class="_menu"><button onClick = "transition()" class="mobilemenu mobilemenu_transition"><span></span></button>
			</div></a>
			
			
			
			
		
</body>
</html>

相关内容

最新更新

热门标签：