[英]Bootstrap dropdown-menu unhover when in submenu
I have a dropdown-menu working with javascript on hover. 我有一个在悬停时使用javascript的下拉菜单。
$(document).ready(function(){
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
});
and I set on hover style 然后我将鼠标悬停在样式上
i.dropdown:hover
{
background-color: rgb(28,181,181);
}
here is the problem, when i am hovering the dropdown menu not the toggle, the toggle style will go back to normal. 这是问题所在,当我将鼠标悬停在下拉菜单而不是切换上时,切换样式将恢复正常。 since it still register i am still hovering the toggle.
由于它仍然注册,所以我仍将鼠标悬停。
<li style="width:20%" class='dropdown'>
<a href="" class="dropdown-toggle disabled" id="dropdownMenu2"><div align='center'><b>example</b></div></a>
<ul class='dropdown-menu' style='width: 100%;padding:0px;border-width:0px;' aria-labelledby="dropdownMenu2">
<li><a href="" style='height:45px;padding-top: 10px;'><div align='center'><b>example2</b></div></a></li>
<li><a href="" style='height:45px;padding-top: 10px;'><div align='center'><b>example3</b></div></a></li>
</ul>
</li>
Please check this. 请检查一下。
$('li.dropdown').hover(function() { $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500); }, function() { $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500); });
li.dropdown:hover{ background-color: rgb(28,181,181); } .dropdown a{ display:block; line-height: 100%; padding: 10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <li style="width:20%" class='dropdown'> <a href="" class="dropdown-toggle disabled" id="dropdownMenu2"><div align='center'><b>example</b></div></a> <ul class='dropdown-menu' style='width: 100%;padding:0px;border-width:0px;' aria-labelledby="dropdownMenu2"> <li><a href="" style='height:45px;padding-top: 10px;'><div align='center'><b>example2</b></div></a></li> <li><a href="" style='height:45px;padding-top: 10px;'><div align='center'><b>example3</b></div></a></li> </ul> </li>
try with this snippet , is this what you need ? 试试这个代码片段,这是您需要的吗?
$('li.dropdown').hover(function() { $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500); }, function() { $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500); });
li.dropdown { transition-duration:0.7s; } li.dropdown:hover { background-color: rgb(28,181,181); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <li style="width:20%" class='dropdown'> <a href="" class="dropdown-toggle disabled" id="dropdownMenu2"><div align='center'><b>example</b></div></a> <ul class='dropdown-menu' style='width: 100%;padding:0px;border-width:0px;' aria-labelledby="dropdownMenu2"> <li><a href="" style='height:45px;padding-top: 10px;'><div align='center'><b>example2</b></div></a></li> <li><a href="" style='height:45px;padding-top: 10px;'><div align='center'><b>example3</b></div></a></li> </ul> </li>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.