使用 Jquery 从绝对菜单推送内容

Question

您好，我需要制作一个 3 级菜单。

当您悬停时，第一级子菜单显示在 1 级内联块下方。我稍后会使用 flex 使其响应。

然后就和第三关一样了

它应该是这样的：

enter image description here

所以现在我差不多好了，但我知道为什么我的菜单有问题了。

您可以在这里找到 jsfiddle :

https://jsfiddle.net/z1cepma4/

知道如何解决这个问题吗？

在此先感谢您的帮助

      var $level1 = $('#nav li');
    var $level2 = $('#nav li ul');
    var $level3 = $('#nav li ul li ul');
    var $pagecontent = $('#fakecontent');
    var hoverTimeout = '';
      var leaveTimeout = '';
    
    
    
    $level1.mouseenter(function() {
     
    
    var $thislevel2 = $(this).children('ul').first();
     
     console.log('hover level 1 val : ' + $(this).text());
     
     
     clearTimeout(leaveTimeout);
         // 1.
         hoverTimeout = setTimeout(function() {
           // 2. Another submenu open
           if( $thislevel2.is(':visible') ) {
           console.log('level 2 visible');
             // if new hovered li has megamenu, hide old menu and show the new, otherwise slide everything back up
             if( $thislevel2.length ) {
               // stop any other hoverTimeouts triggered through guick back-and-forth hovering
               clearTimeout(hoverTimeout); 
               $thislevel2.filter(':visible').stop(true, true).hide();
               $thislevel2.stop(true, true).show();
               
               console.log('level 2 - parti 1');
             } else {
               $thislevel2.filter(':visible').stop(true, true).slideUp(500);
               $pagecontent.stop(true, true).animate({ paddingTop: '0'}, 500);
                  console.log('level 2 - parti 2');
             }
           } else {
            
             console.log('level 2 not visible');
             if( $thislevel2.length ) {
            
            
               // stop any other hoverTimeouts triggered through guick back-and-forth hovering
               clearTimeout(hoverTimeout); 
               $thislevel2.stop(true, true).show();
               
            
               /* 16.5em is the set height of the megamenu + negative margin of nav ul */
               $pagecontent.stop(true, true).animate({ marginTop: '10em'}, 500);
             }
           }
         }, 200);
     }); //$level1 mouseenter
       
      $level1.mouseleave(function() {
       clearTimeout(hoverTimeout);
       leaveTimeout = setTimeout(function() {
         if( $level2.is(':visible') ) {
           $level2.filter(':visible').stop(true, true).slideUp(500);
           $pagecontent.stop(true, true).animate({ marginTop: '0'}, 500);
         }
       }, 200);
     });

   #fakeheader,
#fakecontent{
  width:100%;
   height:150px;
  background:red;
  position:relative
  }
#nav {position: relative;}
#nav li {
    list-style:none;
    float: left;
}
#nav li a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
}
#nav li a:hover {
  color:red;
 color:#FFF;
 opacity:1;
}

/* Targeting the first level menu */
#nav {  
   
    min-width:850px;
    background:#fff;
    display: block;
    height: 34px;
    z-index: 100;
    position: relative;
    left: 0;
    margin: 0;
    padding: 0;
    width:100%;
}
#nav > li > a {
  color:#000;
}


/* Targeting the second level menu */
#nav li ul {
    color: #333;
    display: none;
    position: absolute; 
    left: 0;
    margin: 0;
    padding: 0;
    width:100%;
}
#nav li ul li {
    display: inline;
}
#nav li ul li a {
    background: #fff;
    border: none;
    line-height: 34px;
    margin: 0;
    padding: 0 8px 0 10px;
}
#nav li ul li a:hover {
    color:red;
    opacity:1;
}

#nav li ul li:hover>a{color:red;}

/* Third level menu */
#nav li ul li ul{
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width:100%;
}
ul.child {
background-color:#FFF;  
}
/* A class of current will be added via jQuery */
#nav li.current > a {
    color:red;
    float:left;
}

/*
#nav li:hover > ul.child {
    left:0;
    top:34px;
    display:inline;
    position:absolute;
    text-align:left;
}
#nav li:hover > ul.grandchild  {
    display:block;
}*/
#nav > li:hover > a{color:red;}
#nav > li > a > li:hover > a{color:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fakeheader">Header
</div>
<div id="#menu-categories">

<ul id="nav">
    <li>
        <a href="#">Quoi manger/Ou dormir...</a>
        <ul class="child">
            <li><a href="#">Associations</a>
                <ul class="child">
                    <li><a href="#">Associations 3</a></li>
                    <li><a href="#">Associations 3</a></li>
                    <li><a href="#">Associations 3</a></li>
                </ul>
            </li>
            <li><a href="#">Autre</a>
                <ul class="child">
                    <li><a href="#">Autre 3</a></li>
                    <li><a href="#">Autre 3</a></li>
                    <li><a href="#">Autre 3</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">Quoi faire...</a>
        <ul class="child">
            <li><a href="#">Associations</a>
                <ul class="child">
                    <li><a href="#">Culturelle</a></li>
                    <li><a href="#">Culturelle</a></li>
                    <li><a href="#">Culturelle</a></li>
                </ul>
            </li>
            <li><a href="#">Associations</a>
                <ul class="child">
                    <li><a href="#">Culturelle</a></li>
                    <li><a href="#">Culturelle</a></li>
                    <li><a href="#">Culturelle</a></li>
                </ul>
            </li>
        </ul>
    </li>
   
</ul>
</div>
<div id="fakecontent">
Content
</div>

Answer 1

结合使用切换和动画：

$('#nav').addClass('active');

$('#nav li').hover(function() {
  $(this).find('> ul').toggleClass('active');
  var visible = $('#menu-categories').find('ul.active').length;
  $('#menu-categories').animate({
    'height': visible * 35
  }, {
    queue: false
  });
  $(this).find('> ul').slideToggle();

})

演示： https://jsfiddle.net/rw6L4nqq/1/

使用 Jquery 从绝对菜单推送内容

Push content from absolute menu with Jquery

css

jquery

menu

absolute

submenu