Question

我有一个相对简单的jQuery下拉菜单，有一个弹出子菜单，我无法在点击时显示。也许是jQuery太绿了。有更多专业知识的人可以指出我的无知吗？

HTML CODE：

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

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

您应该将类'flyout'添加到所需的li标签：

<强> http://jsfiddle.net/LNQq3/2/

<li class='flyout'>

在你的jQuery代码中检查是否存在这个类，并基于它 - 子菜单显示/隐藏...

无法弄清楚jQuery弹出子菜单

1 个答案: