帶多個jQuery的CSS多級下拉菜單

Question

我有一個完美的CSS多級下拉菜單。

我想添加一些額外的jQuery代碼，以便菜單在您懸停時保持打開狀態。然後，您必須點擊屏幕關閉菜單（類似於http://www.cssplay.co.uk/menus/cssplay-click-drop-fly.html或http://www.codenothing.com/archives/2009/multi-level-drop-down-menu/）。

我已經添加了一些jQuery，（見下文），這使得前兩個級別/ uls根據需要工作，但較低級別不會保持打開狀態。有關如何解決此問題的任何想法嗎？

的jsfiddle這裏 - http://jsfiddle.net/PSFk7/5/

jQuery代碼：

$('.top_level').mouseover(function(){ 
    $('.megamenu_main').addClass('megamenu_main_over'); 
    $('html').click(function() {   
     $('.megamenu li.top_level ul').removeClass('megamenu_main_over'); 
    }); 
}); 

$('li.parent').mouseover(function(){ 
    $('li.parent ul').removeClass('children_over') 
    $(this).children('ul').addClass('children_over'); 
    $('html').click(function() {   
     $('ul').removeClass('children_over'); 
    }); 
}); 

HTML代碼：

 <div class="megamenu_container"> 
      <ul class="megamenu megamenu_slide">  
       <li class="top_level"><span><a href="#">Main Page</a></span>   
        <ul class="megamenu_main"> 
         <li><a href="#">Suspendisse</a></li> 
         <li><a href="#">Fusce porta</a></li> 
         <li class="parent"><a href="http://www.mysite.co.uk/mainpage/page-01">Page Level 01</a> 
          <ul class='children'> 
           <li><a href="#">Donec et enim</a></li> 
           <li><a href="#">Aliquam volutpat</a></li> 
           <li class="parent"><a href="#">Page Level 02</a> 
            <ul class='children'> 
             <li class="parent"><a href="#">Page Level 03</a> 
              <ul class='children'> 
               <li><a href="#">Page Level 04</a></li> 
               <li><a href="#">Proin sed nisi a sapien</a></li> 
              </ul> 
             </li> 
             <li><a href="#">Curabitur ultricies</a></li> 
            </ul> 
           </li> 
           <li><a href="#">Nunc sit amet</a></li> 
           <li class="parent"><a href="#">In aliquam orci</a> 
            <ul class='children'> 
             <li class="parent"><a href="#">Page Level 03 V2</a> 
              <ul class='children'> 
               <li><a href="#">Page Level 04 V2</a></li> 
               <li><a href="#">Proin sed nisi a sapien V2</a></li> 
              </ul> 
             </li> 
             <li><a href="#">Curabitur ultricies</a></li> 
            </ul> 
           </li> 
           <li><a href="#">Integer dignissim</a></li> 
           <li><a href="#">Praesent euismod tortor</a></li> 
          </ul> 
         </li> 
         <li><a href="#">Vestibulum quis velit</a></li> 
         <li><a href="#">Aliquam lacinia</a></li> 
         <li class="parent"><a href="#">Ut porttitor ipsum</a> 
            <ul class='children'> 
             <li class="parent"><a href="#">Page Level 01 V1</a> 
              <ul class='children'> 
               <li><a href="#">Page Level 02 V1</a></li> 
               <li><a href="#">Proin sed nisi a sapien V1</a></li> 
              </ul> 
             </li> 
             <li><a href="#">Curabitur ultricies</a></li> 
            </ul> 
         </li> 
         <li><a href="#">Mauris sit amet</a></li> 
         <li><a href="#">Praesent</a></li> 
         <li><a href="#">Nullam ornare</a></li>         
        </ul> 
       </li> 
      </ul> 
     </div> 

CSS代碼：

.megamenu_container { height:55px; line-height:55px; margin:0; position:relative; float:left; z-index:9; background:#d55c4b; margin:0 17px 0 0; padding:0 39px; text-align:left; } 
.megamenu_container a { text-decoration: none; } 
.megamenu_main { list-style:none; padding:0; margin:0; } 
.megamenu li.top_level { list-style:none; background:none; } 
.megamenu .top_level > span { color:#FFF; line-height:55px; outline:0; text-decoration:none; } 
.megamenu .top_level > span a { color:#FFF; } 
.megamenu_main, .megamenu_main ul { position:absolute; top:-9999em; left:-9999em; width:167px; margin:0 0 40px -1px; padding:0; -webkit-box-shadow: 0 2px 5px #bbb; -moz-box-shadow: 0 2px 5px #bbb; -o-box-shadow: 0 2px 5px #bbb; box-shadow: 0 2px 5px #bbb; border:none; border-top:5px solid #d04734; background:#FFF; display:none; } 
.megamenu > li:hover .megamenu_main { top:55px; left:1px; display:block; }  
.megamenu > li .megamenu_main_over { top:55px; left:1px; display: block; }  
.megamenu_main li:hover > ul { top:-5px; left:100%; display:block; }   
.megamenu_main ul.children_over, .megamenu_main li.addmenu ul.children { top:-5px; left:100%; display:block; }  
.megamenu_main li:hover > .left_dropdown { left:-100%; } 
.megamenu_slide { top:30px; -webkit-transition: top 0.3s 0.2s, opacity 0 0.2s; -moz-transition: top 0.3s 0.2s, opacity 0 0.2s; -o-transition: top 0.3s 0.2s, opacity 0 0.2s; -ms-transition: top 0.3s 0.2s, opacity 0 0.2s; transition: top 0.3s 0.2s, opacity 0 0.2s; } 
.megamenu_slide ul { left:80%; -webkit-transition: left 0.2s 0.2s, opacity 0 0.2s; -moz-transition: left 0.2s 0.2s, opacity 0 0.2s; -o-transition: left 0.2s 0.2s, opacity 0 0.2s; -ms-transition: left 0.2s 0.2s, opacity 0 0.2s; transition: left 0.2s 0.2s, opacity 0 0.2s; } 
.megamenu_slide li > .left_dropdown { left:-80%; } 
.parent, .megamenu_main .dropdown_arrow { background-image:url(http://shop.tree-free.com/secure/images/arrow_right_small.gif); background-repeat: no-repeat; background-position: 96% 48%; } 
.parent:hover, .megamenu_main .dropdown_arrow:hover { background-image:url(http://shop.tree-free.com/secure/images/arrow_right_small.gif); } 
.megamenu_main li a { text-decoration: none; color:#4d4d4d; font-size:12px; } 
.megamenu_main li { border-bottom:1px solid #e5e5e5; line-height:0.8em; margin:0; padding:9px 27px 9px 13px; } 
.megamenu_main li a:hover { color:#d04734; } 
.megamenu_main > li a { font-weight:bold; } 
.megamenu_main > li ul { list-style: none; padding:0; margin:0; min-height:408px; } 
.megamenu_main > li ul li a { font-weight:normal; } 
.main_opened li, .megamenu_main > li ul li { position:static; -webkit-transition: background-color 0.3S; -moz-transition: background-color 0.3s; -o-transition: background-color 0.3s; -ms-transition: background-color 0.3s; transition: background-color 0.3s; } 

Answer 1

您正在移除所有children_over鼠標懸停的類（$('li.parent ul').removeClass('children_over')）正在破壞您的腳本。 而是隻從同級樹刪除那些類（即不curernt物品父母）

您可以使用該行，而不是這樣做：

$(this).siblings().find('ul').removeClass('children_over'); 

這裏是一個修改小提琴：http://jsfiddle.net/PSFk7/8/

希望它幫助:)