Скрыть выпадающее меню 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

Попробуйте этот метод переключения должен работать

<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 2

$( 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 3

Просто удалите класс 'show' из раскрывающегося списка:

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