[英]drop down menu on mouseout should remain visible
The button with dropdown menu should be visible when the mouse is moved inside the div which works fine but the problem is that when I move the mouse out of that div, I want the button and dropdown menu to remain visible if menu is dropped down but the button should get hidden if menu is not dropped down.How can I achieve this?(in the given code, button and dropdown menu get hidden on mouseout no matter what) 当鼠标在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";
}
Instead of set the style
to display none
, use the .show()
and .hide()
in jquery
to show and hide the specific div
取而代之的设置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";
}
If I am understanding you correctly you want something like this: 如果我正确地理解了您的要求,那么您将需要以下内容:
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"}
}
Try this fiddle , hope this is what you are looking for. 试试这个小提琴 ,希望这是您想要的。
You don't need onmouseout ="g()"
您不需要onmouseout ="g()"
Update 更新资料
try this updated fiddle 试试这个更新的小提琴
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.