Jquery下拉菜單單擊始終打開

Question

我創建了一個下拉菜單點擊，但它有點奇怪。 單擊按鈕下拉列表時，會出現下拉菜單。 但是當我將光標移動到另一個時（沒有再點擊按鈕下拉菜單），下拉菜單消失，它已成為可下降的下拉菜單而不是下拉菜單點擊（抱歉我的英文不好）

當我單擊按鈕下拉菜單並移動光標時，如何使下拉菜單單擊始終顯示？

（這是我的代碼）

HTML

<aside class="sidebar">
      <ul>
        <li><a href="#"><i class="material-icons">home</i>Homepage</a></li>
        <li class="button_dropdown"><a href="javascript:void(0)" class="dropdown-toggle"><i class="material-icons">widgets</i>Events Organizer <i class="material-icons multi_menu">keyboard_arrow_right</i></a>
          <ul class="dropdown_menu">
            <li><a href="#">Create Events</a></li>
            <li><a href="#">List Events</a></li>
          </ul>
        </li>
        <li><a href="#"><i class="material-icons">people</i>Peserta Events</a></li>
      </ul>
    </aside>

CSS

aside.sidebar ul li ul.dropdown_menu {
  opacity: 0;
  visibility: hidden;
  height: auto;
  width: 100%;
  margin-top: -1px;
  position: absolute;
  transition: all 0.5s;
  border-left: 1px solid #2c3e50;
  background-color: #34495e;
}
aside.sidebar ul li ul.dropdown_menu.active {
  opacity: 1;
  visibility: visible;
  height: auto;
  width: 100%;
  background-color: #34495e;
  left: 100%;
  top: 0;
  transition: all 0.5s;
}

jQuery的

  $(document).ready(function () {
        $(".button_dropdown").click(function () {
          $(".dropdown_menu").toggleClass("active");
        });
      });

Answer 1

在不更改代碼的情況下，您可以通過添加以下內容來刪除指針事件（點擊等）。

pointer-events:none; to aside.sidebar ul li ul.dropdown_menu

和

pointer-events:auto; to aside.sidebar ul li ul.dropdown_menu.active

Answer 2

可停滯的下拉菜單是因為你已經在你的css中將opacity屬性設置為0（dropdown_menu）。 您必須更改不透明度：0到不透明度：1。 這是您的錯誤代碼：

  aside.sidebar ul li ul.dropdown_menu {
  opacity: 0;
  visibility: hidden;
  height: auto;
  width: 100%;
  margin-top: -1px;
  position: absolute;
  transition: all 0.5s;
  border-left: 1px solid #2c3e50;
  background-color: #34495e;
}

替換為（固定不透明度）：

 aside.sidebar ul li ul.dropdown_menu {
  opacity: 1;
  visibility: hidden;
  height: auto;
  width: 100%;
  margin-top: -1px;
  position: absolute;
  transition: all 0.5s;
  border-left: 1px solid #2c3e50;
  background-color: #34495e;
}

Answer 3

我個人會使用hover而不是click子菜單。 讓我知道你如何使用它。 在點擊之前保持活動狀態。

aside.sidebar ul li ul.dropdown_menu {
  display: none;
  height: auto;
  width: 100%;
  margin-top: -1px;
  position: absolute;
  transition: all 0.5s;
  border-left: 1px solid #2c3e50;
  background-color: #34495e;
  left:200px;
  top:0;
}

aside.sidebar ul li ul.dropdown_menu.active {
  display: block !important;
}

使用此代碼段。

 $(document).ready(function() { $('.button_dropdown').click(function() { $('.dropdown_menu').toggleClass('active'); }); }); 

 aside.sidebar ul li ul.dropdown_menu { display: none; height: auto; width: 100%; margin-top: -1px; position: absolute; transition: all 0.5s; border-left: 1px solid #2c3e50; background-color: #34495e; left:200px; top:0; } aside.sidebar ul li ul.dropdown_menu.active { display: block !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <aside class="sidebar"> <ul> <li>Homepage</li> <li class="button_dropdown"><a href="javascript:void(0)" class="dropdown-toggle">Events Organizer</a> <ul class="dropdown_menu"> <li>Create Events</li> <li>List Events</li> </ul> </li> <li>Peserta Events</li> </ul> </aside>