jquery - jquery中 Bootstrap 导航菜单的动画

Question

 <script>
	$(document).ready(function(e) {
        	$('#about_menu').hover(function(){
			$('#about_sub_menu').toggle('slow')
			
		});
		$('#admission_menu').hover(function(){
			$('#admission_sub_menu').toggle('slow')
			
		});
		$('#student_menu').hover(function(){
			$('#student_sub_menu').toggle('slow')
			
		});	
    });

<div class="collapse navbar-collapse ">
                        <ul class="nav navbar-nav">
                            <li><a href="index.php">Home</a></li>
                            <li class="dropdown" ><a id="about_menu" class="dropdown-toggle" data-toggle="dropdown" href="#">About Us <span
                             class="caret">
                            </span></a>
                            <ul class="dropdown-menu" id="about_sub_menu">
                            <li><a href="introduction.php">Introduction</a></li>
                            <li><a href="location.php"> Location</a></li>
                            <li><a href="board-of-governors.php"> Board Of Governors</a></li>
                            <li><a href="vp-message.php"> VP Message</a></li>
                            </ul>                
                            </li>
                            <li class="dropdown"><a id="admission_menu" class="dropdown-toggle" data-toggle="dropdown" href="#">Admissions<span 
                            class="caret"></span>
                            </a>
                            <ul class="dropdown-menu" id="admission_sub_menu" >
                            <li><a href="criteria.php">Criteria</a></li>
                            <li><a href="fee-structure.php">Fee Structure</a></li>
                            <li><a href="paper-pattern.php">Paper Pattern</a></li>
                            <li><a href="student-reg-form.php">Student Registration Form</a></li>
                            </ul>
                            </li>
                            <li class="dropdown"><a id="student_menu" class="dropdown-toggle" data-toggle="dropdown" href="#">Students <span 
                            class="caret"></span></a>
                            <ul class="dropdown-menu" id="student_sub_menu">
                            <li class="dropdown dropdown-submenu"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Academics</a>
                            <ul class="dropdown-menu">
                            <li class="menu-item"><a href="syllabus.php">Syllabus</a></li>
                            </ul>
                            </li>
</ul>

大家好!!

我只是 bootstrap 和 jquery 的初学者。

我想为我在 bootstrap 中构建的导航菜单设置动画。但是当我将鼠标悬停在 Li 上时，它会显示子菜单。

但问题是，当我想将鼠标悬停在子菜单上时，它就会消失。我希望当我将鼠标悬停在子菜单上时它不应该消失，当我将鼠标光标从 Li 或子菜单上移开并悬停在另一个 li 上时，上一个子菜单应该消失。

非常感谢您的帮助并在此先致谢。

问候 阿里纳德

Answer 1

您必须将 hover 事件绑定(bind)到 li.dropdown 元素。子菜单不在 a 元素下，如果您将鼠标悬停在子菜单上，则会触发 a 元素的 mouseout 事件。如果您在悬停 li 时使用 li.dropdown 并且出现子菜单，它也会扩大 li 的区域(因为子菜单在 li 内code>) 并且你的鼠标指针不会超出 li。

顺便说一句，您可以直接使用 .dropdown 来绑定(bind) hover 事件。无需将它们与其 ID 绑定(bind)。

  $(document).ready(function(e) {
    $('.dropdown').hover(function() {
      $('ul', this).stop(true, true).toggle('slow');
    });
  });

ul.nav > li {
  display: inline-block;
}
ul.nav > li > ul {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collapse navbar-collapse ">
  <ul class="nav navbar-nav">
    <li><a href="index.php">Home</a>
    </li>
    <li class="dropdown"><a id="about_menu" class="dropdown-toggle" data-toggle="dropdown" href="#">About Us <span
                             class="caret"></span></a>
      <ul class="dropdown-menu" id="about_sub_menu">
        <li><a href="introduction.php">Introduction</a>
        </li>
        <li><a href="location.php"> Location</a>
        </li>
        <li><a href="board-of-governors.php"> Board Of Governors</a>
        </li>
        <li><a href="vp-message.php"> VP Message</a>
        </li>
      </ul>
    </li>
    <li class="dropdown"><a id="admission_menu" class="dropdown-toggle" data-toggle="dropdown" href="#">Admissions<span 
                            class="caret"></span>
                            </a>
      <ul class="dropdown-menu" id="admission_sub_menu">
        <li><a href="criteria.php">Criteria</a>
        </li>
        <li><a href="fee-structure.php">Fee Structure</a>
        </li>
        <li><a href="paper-pattern.php">Paper Pattern</a>
        </li>
        <li><a href="student-reg-form.php">Student Registration Form</a>
        </li>
      </ul>
    </li>
    <li class="dropdown"><a id="student_menu" class="dropdown-toggle" data-toggle="dropdown" href="#">Students <span 
                            class="caret"></span></a>
      <ul class="dropdown-menu" id="student_sub_menu">
        <li class="dropdown dropdown-submenu"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Academics</a>
          <ul class="dropdown-menu">
            <li class="menu-item"><a href="syllabus.php">Syllabus</a>
            </li>
          </ul>
        </li>
      </ul>