Question

我想要这个菜单：http://jsfiddle.net/tz37m/1/在整个网站上工作得更好一些，这样如果有人在子菜单中的某个页面上，该子菜单在该页面上就会打开。我也想要它，如果他们所在的当前页面有一个子菜单，则显示其子菜单。我对Jquery很新，我正在努力解决这个问题。

我还注意到，我试图将.focus实现到jquery，这样它不仅可以悬停并且可以通过键盘访问..但是这似乎不起作用。有什么想法吗？

<div id="menu">
  <ul id="nav">
    <li><a href="/home/">Home</a></li>
    <li><a href="/home/about/">About</a></li>
    <li><a href="/home/books/">Books</a>
      <ul>
        <li><a href="/home/books/teachers-notes/">Teachers Notes</a></li>
      </ul>
    </li>
    <li><a href="/home/faq/">FAQ</a></li>
    <li><a href="/home/contact/">Contact</a></li>
  </ul>
</div>



$(function(){
    var path = location.pathname.substring(1);
    if ( path )
        $('#nav a[href$="' + path + '"]').attr('class', 'selected');
});
$(function(){
    $('#nav>li>ul').hide();
    $('#nav>li').hover(function(){
        // check that the menu is not currently animated
        if ($('#nav ul:animated').size() == 0) {
            // create a reference to the active element (this)
            // so we don't have to keep creating a jQuery object
            $heading = $(this);
            // create a reference to visible sibling elements
            // so we don't have to keep creating a jQuery object
            $expandedSiblings = $heading.siblings().find('ul:visible');
            if ($expandedSiblings.size() > 0) {
                $expandedSiblings.slideUp(500, function(){
                    $heading.find('ul').slideDown(500);
                });
            }
            else {
                $heading.find('ul').slideDown(1000);
            }
        }
    });
});

Answer 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //  var windowLocationPathname = "/home/"; //Or  // For testing purpose. 
            var windowLocationPathname = "/home/books/Student-notes2/"; // For testing purpose. 

            //Or

            // var windowLocationPathname = window.location.pathname;

            $('#nav li ul').hide();

            $('#nav').find('a[href="' + windowLocationPathname + '"]').attr('class', 'selected CurrentPage');

            $('.CurrentPage').parents('.SubMenu').show();

            $('#nav li').hover(function () {
                //check that the menu is not currently animated
                if ($('#nav ul:animated').size() == 0) {
                    // create a reference to the active element (this)
                    // so we don't have to keep creating a jQuery object
                    $heading = $(this);
                    // create a reference to visible sibling elements
                    // so we don't have to keep creating a jQuery object
                    $expandedSiblings = $heading.siblings().find('ul:visible');
                    if ($expandedSiblings.size() > 0) {
                        $expandedSiblings.slideUp(500, function () {
                            $heading.find('ul').slideDown(500);
                        });
                    }
                    else {
                        $heading.find('ul').slideDown(1000);
                    }
                }
            });
        });
    </script>
    <style type="text/css">
        body
        {
            color: #000;
            font: 9pt/1.5em Arial, Helvetica, sans-serif;
            margin: 0;
            padding: 0;
        }

        #menu
        {
            font-family: Georgia,Times New Roman,serif;
            left: 130px;
            position: absolute;
            top: 65px;
            width: 120px;
            z-index: 30;
        }

        #menu ul
        {
            list-style-type: none;
            margin: 0 1.5em;
            padding: 0;
            list-style-type: none;
        }

        #menu ul li
        {
            font-size: 1.9em;
            font-weight: normal;
            line-height: 1.3em;
            text-align: right;
        }

        #menu ul li a
        {
            border-bottom: 0px none;
            color: #000;
            outline: medium none;
            text-decoration: none;
        }

        #menu ul li a:focus, #menu ul li a:hover, #menu ul li a.selected
        {
            /*color:#CC86A8;pink*/
            color: #99AA00;
        }

        #menu li ul
        {
            margin: 0;
            padding: 0.1em 0 0.4em;
        }

        #menu ul li ul li
        {
            font-size: 0.75em;
            line-height: 1.1em;
        }
    </style>
</head>
<body>
    <div id="menu">
        <ul id="nav">
            <li><a href="/home/">Home</a></li>
            <li><a href="/home/about/">About</a></li>
            <li><a href="/home/books/">Books</a>
                <ul class="SubMenu">
                    <li><a href="/home/books/teachers-notes/">Teachers Notes</a></li>
                </ul>
            </li>
            <li><a href="/home/books/">StudentBooks</a>
                <ul class="SubMenu">
                    <li><a href="/home/books/Student-notes1/">Student Notes1</a></li>
                    <li><a href="/home/books/Student-notes2/">Student Notes2</a></li>
                </ul>
            </li>
            <li><a href="/home/faq/">FAQ</a></li>
            <li><a href="/home/contact/">Contact</a></li>
        </ul>
    </div>
    
</body>
</html>

多级扩展jquery菜单，如果当前页面在该子菜单项内，则展开/显示子菜单？

1 个答案: