下拉菜单在点击时打开，在鼠标移开时关闭

Question

我只设法使用 css 在悬停时打开它，但我不知道如何将两者结合起来并在单击时打开它，当鼠标移开时关闭它。如果之前出现过这个问题，我也很抱歉，但是我到处搜索都找不到答案。

这是我目前的代码：

<div class="col-md-3"><div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle text-left border-0 rounded-0 py-2" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
    <i class="fa fa-plus float-right" aria-hidden="true"></i>
    <i class="fa fa-minus float-right" aria-hidden="true"></i>

  </button>

  <div class="dropdown-menu rounded-0 border-0" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div></div>

body {
  background: #eeeeee;
}

.btn {
  width: 100%;
}
.dropdown-menu {
  width: 100%;
  height: 100vw;
}

.dropdown:active .dropdown-menu {
    display: block;
    margin-top: 0;
 }

.dropdown-toggle:after {
    display:none;  
}
.btn:active .fa-plus {
    display:none
}

目前，它在点击时打开/关闭。那些字体很棒的图标之所以存在，是因为我也在努力让它们改变。

谢谢！

Answer 1

编辑

在.dropdown-menu 上注册mouseleave 事件并取消事件冒泡。另外，我提到了.dropdown-toggle，应该是data-toggle，对不起。顺便说一句，将.dropdown-toggle 类更改为.data-toggle，这在剪切和粘贴时并不重要，但很重要。

$('.dropdown-menu').on('mouseleave', function(e) {
    $('.data-toggle').dropdown("toggle");
    e.stopPropagation();
});

---

旧

将 .dropdown-toggle 定位到具有data-toggle 属性的元素，它是涉及dropdown component 的所有事情的BS 主要组件。 使用以下内容：

$('.dropdown').on('mouseleave', function() {
    $(".dropdown-toggle").dropdown("toggle"); 
});

片段

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title></title>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'>
<style>
body { background: #eeeeee; }
.btn { width: 100%; }
.dropdown-menu { width: 100%; height: 100vw; }
.dropdown:active .dropdown-menu { display: block; margin-top: 0; }
.dropdown-toggle:after { display: none; }
.btn:active .fa-plus { display: none }
</style>
</head>
<body>
<header> </header>
<section id="testA">
   <div class="col-md-3">
   
      <div class="dropdown closed">
      
         <button class="data-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
         	
         Dropdown button 
         <i class="fa fa-minus float-right" aria-hidden="true"></i> 
         <i class="fa fa-plus float-right" aria-hidden="true"></i> 
         
         </button>
         
         <div class="dropdown-menu rounded-0 border-0" aria-labelledby="dropdownMenuButton"> 
         <a class="dropdown-item" href="#">Action</a> 
         <a class="dropdown-item" href="#">Another action</a> 
         <a class="dropdown-item" href="#">Something else here</a> </div>
      </div>
      
   </div>
   
</section>
<footer> </footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script> 
<script>


	$('.dropdown-menu').on('mouseleave', function(e) {
		$('.data-toggle').dropdown("toggle");
	    e.stopPropagation();
	});
		
</script>
</body>
</html>