修改

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

修改

在mouseleave上注册.dropdown-menu事件并取消事件冒泡。另外，我曾提到.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>

点击下拉打开，鼠标离开时关闭

1 个答案:

修改

旧