Javascript Jquery下拉菜单单击始终打开

我创建了一个下拉菜单点击，但它有点奇怪。当我点击下拉按钮时，下拉菜单已经出现。但是当我将光标移动到另一个位置时（没有再次单击下拉按钮），下拉菜单将消失，并且它已成为可悬停的下拉菜单而不是下拉菜单单击（很抱歉我的英语不好）

当我单击下拉按钮并移动光标时，如何使下拉菜单“单击”始终显示

（这是我的密码）

HTML

Jquery

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

---

在不过度更改代码的情况下，只需添加以下内容即可删除指针事件（单击等）：

指针事件：无至
aside.sidebar ul li ul.下拉菜单

及

指针事件：自动
到
aside.sidebar ul li ul.dropdown_menu.active
可悬停下拉菜单是因为您在css aside（dropdown_menu）中将不透明属性设置为0。必须将不透明度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 {
  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;
}

在这个片段中工作。
$（文档）.ready（函数（）{
$（'.button_下拉列表'）。单击（函数（）{
$（'.dropdown_menu'）。toggleClass（'active'）；
});
});
aside.sidebar ul li ul.dropdown\u菜单{
显示：无；
高度：自动；
宽度：100%；
页边顶部：-1px；
位置：绝对位置；
过渡：均为0.5s；
左边框：1px实心#2c3e50；
背景色：#34495e；
左：200px；
排名：0；
}
aside.sidebar ul li ul.dropdown_menu.active{
显示：块！重要；
}


创建事件
列出事件


佩塞塔事件

您是否使用了诸如Bootstrap之类的框架？我认为您的菜单仍在显示，但由于
left:100%
的原因，您可以对html和纯css做同样的事情，如果这是您的一个选项，那是因为您将
放在一旁。侧边栏ul li ul。下拉菜单设置为
left:100%
。这会导致
ul
从页面左侧100%穿过屏幕。将其设置为侧边栏的宽度，如下面我的答案所示。谢谢您的回答。但这在我的情况下不起作用：）
  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;
}

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;
}