隐藏下拉菜单 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() {

   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

只需从下拉列表中删除类“显示”：

// hide the menu when an example is clicked

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

    $(el.target).parents(".dropdown").removeClass("show"); 

});