隱藏下拉菜單 OnClick

Question

我有一個下拉菜單，其中一個選項執行 Ajax 以顯示另一個 Div 中的數據。

單擊此選項時，我想隱藏下拉菜單（關閉它）。

// hide the menu when an example is clicked
$(".dropdown-item").on("click", function(){
    $(".dropdown-menu").hide(); 
});

我已經嘗試了我在網上找到的以下內容，但它似乎沒有關閉菜單：

 // hide the menu when an example is clicked $(".dropdown-item").on("click", function(){ $(".dropdown-menu").hide(); });

Answer 1

 $( document ).ready(function() { debugger; var ele=$(".dropdown-content"); $(".dropdown-content a").click(function(){ if(this.innerText=="Link 2"){ $(".dropdown-content").hide(); $(".dropbtn").hide(); } }); });

 .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; }.dropdown { position: relative; display: inline-block; }.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }.dropdown-content a:hover {background-color: #f1f1f1}.dropdown:hover.dropdown-content { display: block; }.dropdown:hover.dropbtn { background-color: #3e8e41; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h2>Dropdown Menu</h2> <p>Move the mouse over the button to open the dropdown menu.</p> <div class="dropdown"> <button class="dropbtn">Dropdown</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div>

您可以隱藏這樣的下拉菜單，如果您想顯示，只需添加顯示功能。

Answer 2

試試這個切換方法應該有效

<a href="#" onclick="handleClick()"  class="btn btn-floating" data-toggle="dropdown">
    how/hide menu
</a>

function handleClick(){
    
   $(".dropdown-menu").toggle(); 
    
}

請參閱此鏈接以獲取運行示例：

https://playcode.io/647558/

Answer 3

只需從下拉列表中刪除 class 'show' ：

// hide the menu when an example is clicked
$(".dropdown-item").on("click", function(el){
    $(el.target).parents(".dropdown").removeClass("show"); 
});