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;至aside.sidebar ul li ul.dropdown_menu

和

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

Answer 2

hoverable下拉菜单是因为你已经在你的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>

Jquery下拉菜单点击始终打开

3 个答案: