Member 14086594 Ответов: 2

Как я могу скользить вниз только на уровне меню=2 при наведении курсора на уровне меню=1 ? когда я mouseenter menu-level=1,все подменю скользят вниз . Как я могу решить эту проблему?


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


Что я уже пробовал:

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

2 Ответов

Рейтинг:
6

jaket-cp

Из вашего javascript/jQuery для части drop1

//all css class with drop1
$(".drop1")
	.mouseenter(function(){
		//all css class with drop11 do the slideDown
		$(".drop11").slideDown();
	})
	.mouseleave(function(){
		//all css class with drop11 do the slideUp
		$(".drop11").slideUp();
	})
;
и глядя на разметку
Css-классы drop1 и drop11 используются как для "учебных программ", так и для "свяжитесь с нами"

В браузере, когда mouseenter/mouseleave происходят для drop1, все drop11 будут делать slideDown/slideUp соответственно.

Сделайте что-то вроде этого, чтобы найти соответствующее дочернее выпадающее меню для событий mouseenter/mouseleave.
//slidedown dropdown children dropdown-menu when enter and slideup when leave
$(".dropdown")
	.mouseenter(function() {
		$(this).find('> .dropdown-menu').slideDown();
	})
	.mouseleave(function() {
		$(this).find('> .dropdown-menu').slideUp();
  	})
;

Вот jsfiddle с добавленной разметкой и javascript, как показано выше пример:
JSFiddle[^]

Надеюсь, это укажет вам правильное направление.


Рейтинг:
1

Richard Deeming

Вам нужно найти конкретное подменю в текущем меню, а не анимировать все с помощью класса подменю.

$(".drop1").mouseenter(function(){ 
    $(this).find(".drop11").slideDown(); 
}).mouseleave(function(){ 
    $(this).find(".drop11").slideUp(); 
});