如果當前頁面在該子菜單項中，多級擴展jquery菜單以展開/顯示子菜單？

我想要這個菜單：http://jsfiddle.net/tz37m/1/在整個網站上工作得更好，這樣，如果某人在子菜單中的某個頁面上，該子菜單在他們位於該頁面上時處於打開狀態。我也想要它，所以如果當前頁面上有一個子菜單，那麼它的子菜單就會顯示出來。我對Jquery很新穎，並且正在爲此付出一點努力..如果當前頁面在該子菜單項中，多級擴展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); 
      } 
     } 
    }); 
});

來源

2011-11-01 user1023036

<!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>

來源

2012-04-24 12:28:49 Thulasiram

現場演示中看到此鏈接：http://jsfiddle.net/nanoquantumtech/Sr73j/ – Thulasiram

我也有類似的問題。您的解決方案很好地工作。 – Voodoo

如果當前頁面在該子菜單項中，多級擴展jquery菜單以展開/顯示子菜單？

回答

相關問題