Question

我是JavaScript新手。我创建了一个drowpdown菜单。每当我点击打开下拉菜单时，如果我再次点击它就会隐藏。我想要JavaScript代码，每当我点击下拉菜单中的菜单项时，它都应隐藏。

代码：

<!----- HTML ----->
<div id="menu-btn" onClick="function();">
  click to open
</div>
<ul id="drop-box">
  <li class="sub-menu-item"><a href="#" class="linkBtn">item 01</a></li>
  <li class="sub-menu-item"><a href="#" class="linkBtn">item 02</a></li>
  <li class="sub-menu-item"><a href="#" class="linkBtn">item 03</a></li>
  <li class="sub-menu-item"><a href="#" class="linkBtn">item 04</a></li>
  <li class="sub-menu-item"><a href="#" class="linkBtn">item 05</a></li>
</ul>

public int? UserId { get; set; }
[ForeignKey("UserId")]
public virtual ApplicationUser User { get; set; }

virtual

我的问题是，在点击菜单项后，我可以在javascript中提供哪些代码可以隐藏下拉菜单？

Answer 1

<html>
<head>

<style>
#menu-btn{
   margin: 20px auto;
   width:200px;
   height:50px;
   background-color:green;
   text-align:center;
   padding-top:30px;
   cursor:pointer;
  }

#drop-box{
   width:191px;
   position:absolute;
   left: 697px;
   top: 100px;
   margin:0;
   padding:0;
 }

 #drop-box li{
   list-style:none;
   }

 .linkBtn{
   width:100%;
   background-color:orange;
   display:block;
   margin:3px;
   padding:5px;
   color:black;
   text-align:center;
   }

 .linkBtn:hover{
   background-color:green;
   }

</style>
<script>
function myFunction() { 
   var menuButton = document.getElementById("menu-btn");
   var dropBox = document.getElementById('drop-box');
   var menuItem = document.getElementsByClassName('sub-menu-item');
   dropBox.style.display = 'none';
   menuButton.onclick = function() {
 if(dropBox.style.display == 'none'){
     dropBox.style.display = 'block';
       } else {
     dropBox.style.display = 'none';
              } 
        };
}
        </script>
</head>

<body>


<div id="menu-btn" onClick="myFunction();">
click to open
</div>
<ul id="drop-box">
  <li class="sub-menu-item"><a href="#" class="linkBtn">item 01</a></li>
  <li class="sub-menu-item"><a href="#" class="linkBtn">item 02</a></li>
  <li class="sub-menu-item"><a href="#" class="linkBtn">item 03</a></li>
  <li class="sub-menu-item"><a href="#" class="linkBtn">item 04</a></li>
  <li class="sub-menu-item"><a href="#" class="linkBtn">item 05</a></li>
</ul>

</body>
</html>

请检查此代码

Answer 2

单击绑定项目，请在下面的代码段中获取更多信息

＆＃13;

/* ----- JavaScript ----- */
var menuButton = document.getElementById("menu-btn");
var dropBox = document.getElementById('drop-box');
var menuItem = document.getElementsByClassName('sub-menu-item');
dropBox.style.display = 'none';
menuButton.onclick = function() {
  if (dropBox.style.display == 'none') {
    dropBox.style.display = 'block';
  } else {
    dropBox.style.display = 'none';
  }
};
//bind item click
dropBox.onclick = function() {
  
    dropBox.style.display = 'none';
};

//Second way on li click 
for (var i=0; i<menuItem.length; i++)
 {
  menuItem[i].addEventListener('click', function() {dropBox.style.display = 'none';},false);
 }

＆＃13;

/* ----- CSS ----- */
#menu-btn {
  margin: 20px auto;
  width: 200px;
  height: 50px;
  background-color: green;
  text-align: center;
  padding-top: 30px;
  cursor: pointer;
}

#drop-box {
  width: 191px;
  position: absolute;
  left: 697px;
  top: 100px;
  margin: 0;
  padding: 0;
}

#drop-box li {
  list-style: none;
}

.linkBtn {
  width: 100%;
  background-color: orange;
  display: block;
  margin: 3px;
  padding: 5px;
  color: black;
  text-align: center;
}

.linkBtn:hover {
  background-color: green;
}

＆＃13;

<!----- HTML ----->
<div id="menu-btn" onClick="function();">
  click to open
</div>
<ul id="drop-box">
  <li class="sub-menu-item"><a href="#" class="linkBtn">item 01</a></li>
  <li class="sub-menu-item"><a href="#" class="linkBtn">item 02</a></li>
  <li class="sub-menu-item"><a href="#" class="linkBtn">item 03</a></li>
  <li class="sub-menu-item"><a href="#" class="linkBtn">item 04</a></li>
  <li class="sub-menu-item"><a href="#" class="linkBtn">item 05</a></li>
</ul>

＆＃13;

Answer 3

这是你可以通过javascript实现的：

document.querySelectorAll(".sub-menu-item").forEach(function(item, index){
    document.querySelectorAll(".sub-menu-item")[index].addEventListener("click", function(){
        document.querySelector("#drop-box").style.display = 'none';
    })
});

Here is the JSFiddle demo

Answer 4

javascript
==========
var menuButton = document.getElementById('menu-btn');
var dropBox = document.getElementById('drop-box');
var menuItem = document.getElementsByClassName('sub-menu-item');
dropBox.style.display = "none";
menuButton.onclick = function() {
  if (dropBox.style.display == 'none' || dropBox.style.display == ''){
    dropBox.style.display = 'block';
  } else {
    dropBox.style.display = 'none';
  }
};



css
=====
#menu-btn {
  margin: 20px auto;
  width: 200px;
  height: 50px;
  background-color: green;
  text-align: center;
  padding-top: 30px;
  cursor: pointer;
}

#drop-box {
  width: 191px;
  position: absolute;
 left: 140px;
  top: 70px;
  margin: 0;
  padding: 0;
}

#drop-box li {
  list-style: none;
}

.linkBtn {
  width: 100%;
  background-color: orange;
  display: block;
  margin: 3px;
  padding: 5px;
  color: black;
  text-align: center;
}

.linkBtn:hover {
  background-color: green;
}

单击下拉框中的菜单项后隐藏下拉框

4 个答案: