[英]drop down menu on mouseout should remain visible
当鼠标在div内移动时,带有下拉菜单的按钮应该可见,这很好,但问题是当我将鼠标移出该div时,如果菜单被下拉,我希望按钮和下拉菜单保持可见,但是如果菜单没有被下拉,按钮应该被隐藏。我该如何实现?(在给定的代码中,无论如何鼠标和按钮都被隐藏)
<div id="img_container" name="img_container" onmouseover="f()" onmouseout ="g()">
<img src="image/images.jpg" alt="Cover" >
<div class="btn-group" id="cov" name="cov" >
<button class="btn dropdown-toggle" data-toggle="dropdown">Action
</button>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</div>
</div>
function f(){
document.getElementById("cov").style.display="inline-block";
}
function g(){
document.getElementById("cov").style.display="none";
}
取而代之的设置style
,以显示none
,使用.show()
和.hide()
在jquery
显示和隐藏特定div
$('#cov').hide();
function f() {
//document.getElementById("cov").style.display = "inline-block";
$('#cov').show();
}
function g() {
// $('#cov').hide();
//document.getElementById("cov").style.display = "none";
}
如果我正确地理解了您的要求,那么您将需要以下内容:
var list = document.getElementById("dropdown-menu");
var menu = document.getElementById("cov");
function dropdown() {
if (list.style.display == "none") {
list.style.display = "block";
} else {
list.style.display = "none";
}
}
function f() {
menu.style.display = "block";
}
function g() {
if (list.style.display == "none") {
menu.style.display = "none";
} else if (list.style.display == "block"){
menu.style.display = "block";
} else {menu.style.display = "block"}
}
这是一个演示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.