隐藏下拉菜单 OnClick

Question

我有一个下拉菜单，其中一个选项执行 Ajax 以在另一个 Div 中显示数据。

单击此选项时，我想隐藏下拉菜单（关闭它）。

<div class="dropdown">

                        <a href="#" class="btn btn-floating" data-toggle="dropdown">

                            <i class="ti-more-alt"></i>

                        </a>

                        <div class="dropdown-menu dropdown-menu-right" >

                           <a href="#" class="dropdown-item"   data-sidebar-target="#view-detail"  onclick="return onclickFunction('<?php echo $master_repository_id ?>');">View Folder Details</a>

                            <a href="#" class="dropdown-item">Share Folder via Email</a>

                            <a href="#" class="dropdown-item">Rename Folder</a>

                            <a href="#" class="dropdown-item">Delete Folder</a>

                        </div>

                    </div>

我试过下面我在网上找到的，但它似乎没有关闭菜单：

// hide the menu when an example is clicked

$(".dropdown-item").on("click", function(){

    $(".dropdown-menu").hide(); 

});

Answer 1

$( document ).ready(function() {&nbsp; &nbsp;debugger;&nbsp; &nbsp;var ele=$(".dropdown-content");&nbsp; &nbsp;&nbsp; &nbsp;$(".dropdown-content a").click(function(){&nbsp; &nbsp; &nbsp;if(this.innerText=="Link 2"){&nbsp; &nbsp; &nbsp; $(".dropdown-content").hide();&nbsp; &nbsp; &nbsp; $(".dropbtn").hide();&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;});});.dropbtn {&nbsp; background-color: #4CAF50;&nbsp; color: white;&nbsp; padding: 16px;&nbsp; font-size: 16px;&nbsp; border: none;&nbsp; cursor: pointer;}.dropdown {&nbsp; position: relative;&nbsp; display: inline-block;}.dropdown-content {&nbsp; display: none;&nbsp; position: absolute;&nbsp; background-color: #f9f9f9;&nbsp; min-width: 160px;&nbsp; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);&nbsp; z-index: 1;}.dropdown-content a {&nbsp; color: black;&nbsp; padding: 12px 16px;&nbsp; text-decoration: none;&nbsp; display: block;}.dropdown-content a:hover {background-color: #f1f1f1}.dropdown:hover .dropdown-content {&nbsp; display: block;}.dropdown:hover .dropbtn {&nbsp; 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">&nbsp; <button class="dropbtn">Dropdown</button>&nbsp; <div class="dropdown-content">&nbsp; <a href="#">Link 1</a>&nbsp; <a href="#">Link 2</a>&nbsp; <a href="#">Link 3</a>&nbsp; </div></div>你像这样隐藏一个下拉菜单，如果你想显示只需添加显示功能。

Answer 2

试试这个切换方法应该有效<a href="#" onclick="handleClick()"&nbsp; class="btn btn-floating" data-toggle="dropdown">&nbsp; &nbsp; how/hide menu</a>function handleClick(){&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$(".dropdown-menu").toggle();&nbsp;&nbsp; &nbsp;&nbsp;}请参考此链接以获取运行示例：https://playcode.io/647558/

Answer 3

只需从下拉列表中删除类“显示”：// hide the menu when an example is clicked$(".dropdown-item").on("click", function(el){&nbsp; &nbsp; $(el.target).parents(".dropdown").removeClass("show");&nbsp;});