Question

我对JavaScript很陌生并且在尝试获得所需结果时遇到了一些麻烦。我根据w3学校的例子建立了一个非画布菜单。除了使用“x”按钮之外，我希望用户能够单击汉堡包glyphicon以在打开菜单时关闭菜单。如果有一种更简单的方法可以使用JQuery做到这一点，那也很棒！

这是我的尝试：

var width = document.getElementById("nav").style.width;
while (width != 0) {
    document.getElementById('glyphicon-menu-hamburger').onclick = closeNav();
  }

这是codepen： https://codepen.io/nathanmathews/pen/XRKBBN

这是我的更新尝试，仍然不正确：

var width = document.getElementById("nav").style.width;
if (width != 0) {
    document.getElementById('glyphicon-menu-hamburger').onclick = closeNav;
  }

Answer 1

只需将此=COUNTIF(B:B,"new")

替换为

pseudocode

// method #1
User.Cancel(a *Appointment) result

// method #2
Appointment.Cancel(u *User) result

即可

openNav()

Answer 2

这是更新的代码。这是你想要的吗？

function toggleMenu(){
  if($("#nav").width() > 0){
    closeNav();
  }else{
    openNav();
  }
}

function openNav() {
 $(".container-fluid .nav-menu span").attr("class","").html("×");   document.getElementById("nav").style.width = "250px";
     document.getElementById("main").style.marginRight = "250px";
}
    
function closeNav() {
  $(".container-fluid .nav-menu span").attr("class","glyphicon glyphicon-menu-hamburger").html("");   document.getElementById("nav").style.width = "0";
    document.getElementById("main").style.marginRight = "0";
}

var width = document.getElementById("nav").style.width;
while (width != 0) {
    document.getElementById('glyphicon-menu-hamburger').onclick = closeNav();
  }

.nav-menu span{
  float: right;
  font-size: 35px;
  line-height: 60px;
  margin-left: 2px;
  margin-right: 15px;
  cursor: pointer;
}
.nav-menu a{
  font-size: 30px;
  font-weight: bold;
}
.hiddenNav{
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: rgb(164, 166, 168);
  overflow: hidden;
  padding-top: 50px;
  transition: .5s; 
}
.hiddenNav a{
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: white;
    display: block;
    transition: 0.3s
}
.hiddenNav a:hover, .hiddenNav a:focus{
    color: #f1f1f1;
}
#main{
  transition: margin-right .5s;
}
.glyphicon-menu-hamburger{
  cursor: pointer;
}

<!--Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--Main Wrapper-->
<div id="main">
  
<!--Navbar-->
<div class="navbar navbar-default" role="navigation">
	<div class="container-fluid">
		<div class="nav-menu">
			<span onclick="toggleMenu()" class="glyphicon glyphicon-menu-hamburger"></span>
			<a class="navbar-brand" href="#">Example</a>
		</div>
	</div>
</div>

<!--Hidden Menu-->
<div id="nav" class="hiddenNav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">Option 1</a>
  <a href="#">Option 2</a>
  <a href="#">Option 3</a>
  <a href="#">Option 4</a>
</div>
</div>

单击JavaScript关闭菜单

2 个答案: