找不到jQuery展開式子菜單

Question

我有這個相對簡單的jQuery下拉菜單，有一個彈出式子菜單，我無法在點擊時顯示。太青與jQuery可能。有人用更多的專業知識能否請您指出我的無知？

小提琴鏈接： http://jsfiddle.net/LNQq3/1/

HTML代碼：

<nav> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li> 
     <span>Top 2</span> <ul> 
      <li><a href="#">Sub 2-1</a></li> 
      <li> 
      <a href="#">Sub 2-2</a> 
      <!-- ------------------------------- Flyout submenu --> 
      <ul> 
       <li><a href="#">Flyout 2-2-1</a></li> 
       <li><a href="#">Flyout 2-2-2</a></li> 
       <li><a href="#">Flyout 2-2-3</a></li> 
      </ul> 
      </li> 
      <li><a href="#">Sub 2-3</a></li> 
     </ul> 
     </li> 
    </ul> 
    </nav> 

CSS代碼：

/* Top level menu bar */ 
nav ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    font-family: Arial, Helvetica, Sans-Serif; 
    font-size: 12pt; 
    color: Black; 
} 
/* Each list item inside horizontal menu bar */ 
nav ul li { 
    float: left; 
    width: 20%; 
    position: relative; 
    z-index: 10; 
} 
/* Text and links across navbar */ 
nav span, nav a { 
    /* Preload two background images */ 
    background: #40A2EE; 
    text-decoration: none; 
    outline: none; 
    display: block; 
    height: 40px; 
    line-height: 40px; 
    width: 100%; 
    text-align: center; 
} 
/* Unvisited/visited links in horizontal bar  */ 
nav a:link, nav a:visited { 
    background: #40A2EE; 
    color: Black; 
} 
/* Hovering over list item in top menu bar */ 
nav ul li:hover a, nav ul li:hover span { 
    background: #15619B; 
    color: Yellow; 
} 
/* Drop-down menu for each item in menu bar */ 
nav ul li ul { 
    background: #40A2EE; 
    box-shadow: 0 40px 40px -20px black inset; 
    position: absolute; 
    z-index: 11; 
    width: 100%; 
    display: none; 
} 
/* Individual list items in drop-down menus */ 
nav ul li ul li { 
    width: 100%; 
    float: none; 
    height: 44px; 
    line-height: 44px; 
    position: relative; 
} 
/* Links in drop-down menus */ 
nav ul li ul li a, nav ul li ul li a:link, nav ul li ul li a:visited { 
    background: none; 
    display: block; 
    text-align: left; 
    text-indent: 10%; 
    width: 100%; 
    height: 100%; 
    color: White; 
    text-decoration: none; 
    outline: none; 
} 
/* Hover and active states in drop down menu */ 
nav ul li ul li a:hover, nav ul li ul li a:active { 
    background: #15619B; 
    color: Yellow; 
} 
/* ------------------------ Flyout submenu */ 
nav ul li ul li ul { 
    position: absolute; 
    top: 0; 
    left: 99%; 
    z-index: 12; 
} 

JS代碼：

$(document).ready(function() { 
    //Hides all visible dropdown menus. 
    function hideall() { 
     $('nav ul li ul').hide(); 
    } 

    //When clicking anywhere on the page, hide all dropdown menus. 
    $('html').click(function() { 
     hideall() 
    }); 

    //Clicked on top menu bar item. 
    $('nav ul li').click(function (e) { 
     if (!$(this).hasClass('flyout')) { 
      //Is dropdown already hidden? 
      var hidden = $("ul", this).is(":hidden") 
      //Hide all dropdown menus. 
      hideall() 
      //If it was hidden already, show it.. 
      if (hidden) { 
       $("ul", this).show(); 
       $("ul li ul", this).hide(); 
      } 
     } 
     //Don't do html.click to hide all menus. 
     e.stopPropagation() 
    }); 

    //Clicked on dropdown menu item. 
    $('nav ul li ul li').click(function (e) { 
     //Is flyout already hidden? 
     var hidden = $("ul", this).is(":hidden") 
     if (hidden) { 
      $("ul", this).show(); 
     } 
     //Don't do html.click to hide all menus. 
     e.stopPropagation() 
    }); 
}); 

Answer 1

您應該添加類 '彈出' 到期望的L1標籤：

http://jsfiddle.net/LNQq3/2/

<li class='flyout'> 

在jQuery代碼沒有這個類的存在性的檢查，並根據它 - 子菜單顯示/隱藏...