单击链接时，使用鼠标悬停打开下拉菜单并关闭菜单

Question

单击链接时，我需要使用javasript关闭下拉菜单。 我有一个用mouse：hover打开的Dropdownmenu。 现在，我需要一个功能，当从菜单中单击某些链接（例如“ down1”）时，关闭菜单。 但是我不知道该怎么办。

 .dropdown { position: relative; display: inline-block; width: 25%; } .gap { text-align: center; padding: 1em 0em; background-color: #f47721; margin-top: 6%; box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16); border-radius: 2%; } .dropbt1 { background-color: #f47721; color: white; padding: 1px; font-size: 13px; border: none; cursor: pointer; } .dropdown-content1 { display: none; position: absolute; background-color: #f47721; /* min-width: 160px; */ box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16); z-index: 1; } .dropdown-content1 a { color: white; padding: 8px 3px; text-decoration: none; display: block; } .dropdown-content1 a:hover { background-color: #d86a1e } .dropdown:hover .dropdown-content1 { display: block; width: 100%; } 

 <div class="dropdown"> <div class="gap"> <h3>Dropdownmenu</h3> <button class="dropbt1"><h3>please choose</h3></button> <div class="dropdown-content1"> <a href="#" id="" class="specialLink">down1</a> <a href="#" id="" class="specialLink">down2</a> <a href="#" id="" class="specialLink">down3</a> </div> </div> </div> 

单击链接时，我需要使用javasript关闭下拉菜单。 我有一个用mouse：hover打开的Dropdownmenu。 现在，我需要一个功能，当从菜单中单击某些链接（例如“ down1”）时，关闭菜单。 但是我不知道该怎么办。

Answer 1

我已经完成了示例代码，希望对您有所帮助。

 $(document).ready(function(){ $('.dropdown-content1 a').on('click', function(){ $('.dropdown-content1').hide(); }); }); 

 .dropdown { position: relative; display: inline-block; width: 25%; } .gap { text-align: center; padding: 1em 0em; background-color: #f47721; margin-top: 6%; box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16); border-radius: 2%; } .dropbt1 { background-color: #f47721; color: white; padding: 1px; font-size: 13px; border: none; cursor: pointer; } .dropdown-content1 { display: none; position: absolute; background-color: #f47721; /* min-width: 160px; */ box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16); z-index: 1; } .dropdown-content1 a { color: white; padding: 8px 3px; text-decoration: none; display: block; } .dropdown-content1 a:hover { background-color: #d86a1e } .dropdown:hover .dropdown-content1 { display: block; width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="dropdown"> <div class="gap"> <h3>Dropdownmenu</h3> <button class="dropbt1"><h3>please choose</h3></button> <div class="dropdown-content1"> <a href="#" id="" class="specialLink">down1</a> <a href="#" id="" class="specialLink">down2</a> <a href="#" id="" class="specialLink">down3</a> </div> </div> </div> 

Answer 2

这是一个通用的javascript解决方案，可以重复使用。 请注意，由于关闭的菜单的大小和第一个链接的位置，单击第一个链接的上半部分将导致菜单立即重新打开（因为鼠标仍悬停在菜单上）

 document.querySelector('body').addEventListener('click', function(e) { var clickedElement = e.target; if (clickedElement.classList.contains('specialLink')) { var menu = clickedElement.parentElement; menu.style.display = 'none'; menu.classList.remove('touched'); // then remove the style after giving it a chance to close so hovering will reopen the menu setTimeout(function() { menu.style = ''; }, 200); } if (clickedElement.classList.contains('dropbt1')){ var menu = clickedElement.nextSibling.nextSibling; if(!menu.classList.contains('touched')) menu.classList.add('touched'); else menu.classList.remove('touched'); } }); 

 .dropdown { position: relative; display: inline-block; width: 25%; } .gap { text-align: center; padding: 1em 0em; background-color: #f47721; margin-top: 6%; box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16); border-radius: 2%; } .dropbt1 { background-color: #f47721; color: white; padding: 1px; font-size: 13px; border: none; cursor: pointer; } .dropdown-content1 { display: none; position: absolute; background-color: #f47721; /* min-width: 160px; */ box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16); z-index: 1; } .dropdown-content1 a { color: white; padding: 8px 3px; text-decoration: none; display: block; } .dropdown-content1 a:hover { background-color: #d86a1e } .dropdown:hover .dropdown-content1, .dropdown-content1.touched { display: block; width: 100%; } .dropbt1{ padding:0.5em; font-size:1em; } 

 <div class="dropdown"> <div class="gap"> <h3>Dropdownmenu</h3> <button class="dropbt1">please choose</button> <div class="dropdown-content1"> <a href="#" id="" class="specialLink">down1</a> <a href="#" id="" class="specialLink">down2</a> <a href="#" id="" class="specialLink">down3</a> </div> </div> </div>