單擊鏈接時，使用鼠標懸停打開下拉菜單並關閉菜單

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>