如何在悬停菜单级别= 1时仅向下滑动菜单级别= 2？当我mouseenter menu-level = 1时，所有子菜单都向下滑动。我该如何设置此问题？ [英] How do I slide-down only menu-level=2 on hover menu-level=1 ? when I mouseenter menu-level=1 all sub-menu slide down . How do I can set this problem?

问题描述

<div class="navbar navbar-inverse no-border bg0">
                <div class="container-fluid">
            <!---Brand and toggle get grouped for better mobile display--->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>

                        </button>
                        <!--<div class="navbar-brand">
                            <a href="index.html"><img src="" class="img img-responsive" style=""><span>COMPANY LOGO</span></a>
                        </div>-->
                    </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="menu">
                            <ul class="nav navbar-nav navbar-right">
                                <li menu-level="1"] class="active"><a href="index.html"><span data-hover="Home">Home</span></a></li>
                                <li menu-level="1"><a href="about.html"><span data-hover="help">About Us </span></a></li>
                                <li menu-level="1" class="dropdown drop1"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span data-hover="login">Training Programmes </span></a>
                                  <ul class="dropdown-menu drop11">
                                      <li menu-level="2"><a href="#">Website Designing</a></li>
                                      <li menu-level="2"><a href="#">Website Designing</a></li>
                                      <li menu-level="2"><a href="#">Website Designing</a></li>
                                      <li menu-level="2"><a href="#">Website Designing</a></li>
                                      <li menu-level="2"><a href="#">Website Designing</a></li>
                                      <li menu-level="2" class="dropdown drop2"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Website Designing <span class="caret"></span></a>
                                          <ul class="dropdown-menu drop22">
                                              <li menu-level="3"><a href="#">Website Designing</a></li>
                                              <li menu-level="3"><a href="#">Website Designing</a></li>
                                              <li menu-level="3"><a href="#">Website Designing</a></li>
                                              <li menu-level="3" class="dropdown drop3"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Website Designing</a>
                                                  <ul class="dropdown-menu drop33">
                                                      <li menu-level="4"><a href="#">Website Designing</a></li>
                                                      <li menu-level="4"><a href="#">Website Designing</a></li>
                                                      <li menu-level="4"><a href="#">Website Designing</a></li>
                                                   </ul>
                                              </li>
                                              <li menu-level="3"><a href="#">Website Designing</a></li>
                                          </ul>
                                      </li>
                                      <li><a href="#">Commerce Classes</a></li>
                                    </ul menu-level="2">
                                </li>
                                <li menu-level="1" class="dropdown drop1"><a href="contact.html" class="dropdown-toggle" data-toggle="dropdown"><span data-hover="login">Contact Us</span></a>
                                    <ul class="dropdown-menu drop11">
                                      <li menu-level="2"><a href="#">Website Designing</a></li>
                                      <li menu-level="2"><a href="#">Website Designing</a></li>
                                      <li menu-level="2"><a href="#">Website Designing</a></li>
                                      <li menu-level="2"><a href="#">Website Designing</a></li>
                                    </ul>
                                </li>
                                <li menu-level="1"><a href="contact.html"><span data-hover="login">Testimonials</span></a></li>
                            </ul>

                    </div>
                </div>
            </div>
</div>

What I have tried:

What I have tried:

$(".drop1").mouseenter(function(){
             $(".drop11").slideDown();
			 }).mouseleave(function(){
             $(".drop11").slideUp();
			 });
			 
			 $(".drop2").mouseenter(function(){
             $(".drop22").slideDown();
			 }).mouseleave(function(){
             $(".drop22").slideUp();
			 });
			 
			 $(".drop3").mouseenter(function(){
             $(".drop33").slideDown();
			 }).mouseleave(function(){
             $(".drop33").slideUp();
			 });

推荐答案

(\".drop1\").mouseenter(function(){

(".drop1").mouseenter(function(){

(\".drop11\").slideDown();
\t\t\t }).mouseleave(function(){

(".drop11").slideDown(); }).mouseleave(function(){

(\".drop11\").slideUp();
\t\t\t });

(".drop11").slideUp(); });

这篇关于如何在悬停菜单级别= 1时仅向下滑动菜单级别= 2？当我mouseenter menu-level = 1时，所有子菜单都向下滑动。我该如何设置此问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！