子菜单

Question

我有一个使用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);
  });
});

我设置了悬停样式

i.dropdown:hover
{
  background-color: rgb(28,181,181);
}

这是问题所在，当我将鼠标悬停在下拉菜单而非切换时，切换样式将恢复正常。因为它仍在注册，我仍然在盘旋。

<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>

Answer 1

请检查一下。

＆＃13;

＆＃13;

$('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);
});

＆＃13;

li.dropdown:hover{
  background-color: rgb(28,181,181);
}
.dropdown a{
  display:block;
  line-height: 100%;
  padding: 10px;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试使用此代码段，这是您需要的吗？

$('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>