2010-02-08 45 views
0

我有一个嵌套列表。
nav-ul是隐藏的,除非您在该页面上,在这种情况下,jQ将添加选定的类。
我已经写了一个jQuery脚本来处理当前位置的高亮显示,但是当您将鼠标悬停在顶层li上时,我遇到的问题是隐藏了nav-ul。
jQuery - 从以下元素中删除类:hover

项目1 |第2项|第3项|
项目1.1 |项目1.2 |项目1.3 |

<ul id="nav"> 
    <li><a href="one.html">Item 1</a> 
    <ul class="nav-ul selected"> 
     <li>Item 1.1</li> 
     <li>Item 1.2</li> 
     <li>Item 1.3</li> 
    </ul> 
    </li> 
    <li><a href="two.html">Item 2</a> 
    <ul class="nav-ul"> 
     <li>Item 2.1</li> 
     <li>Item 2.2</li> 
     <li>Item 2.3</li> 
    </ul> 
    </li> 
    <li><a href="three.html">Item 3</a> 
    <ul class="nav-ul"> 
     <li>Item 3.1</li> 
     <li>Item 3.2</li> 
     <li>Item 3.3</li> 
    </ul> 
    </li> 
</ul> 

希望是有道理的......

请原谅我的代码,这是我在jQuery的第一次尝试。

var navLi = $("#nav > li"); 
navLi.hover(
    function(e) { 
     navLi.children("ul").removeClass("selected"); 
     $(e.currentTarget).children("ul").addClass("selected"); 
    } 
); 

$(function(){ 
    var pathFileName = (location.pathname);    // Gets the path and filename from the URL. Includes the leading slash 
                 // eg:/water/index.shtml 
// $('#alert').append(pathFileName + '<br />'); 
    var splitPath = location.pathname.split("/"); // split pathFileName at the '/' into an array 
    var i   = pathFileName.length-1; 
/* add index.shtml if pathFileName ends in slash */ 
    if (pathFileName.substr(i) == '/'){ 
     pathFileName = pathFileName + 'index.shtml'; 
    } 

    var mainSelector = "#horizontalNavigation";   // The id of the first level ul 
    var subSelector = ".nav-ul";      // The class of the second level ul 
    if (pathFileName) { 
     if (splitPath.length >= 1){ 
      var pathOnly = ""; 
      for (var i=0; i < splitPath.length-1; i++){ // Rebuild the path from the array without the filename 
       pathOnly += splitPath[i];    // eg:/water/ 
       pathOnly += "/"; 
      } 
      var fullPath = (pathOnly + 'index.shtml'); // Add index.shtml the path 

/* Fix for the Design Rainfalls bug*/ 
      if (splitPath[2] == 'designRainfalls'){  
      var pathOnly = ""; 
       for (var i=0; i < 3; i++){ 
        pathOnly += splitPath[i]; 
        pathOnly += "/"; 
       } 
      var fullPath = (pathOnly + 'index.shtml'); // Make the path /water/designRainfalls/index.shtml 
      } 
      if (fullPath != pathFileName){ 
/* Highlights the currently selected first level tab */ 
       $(mainSelector + ' a[@href^="' + pathOnly + '"]').parents('li').children('a').addClass('current'); 
/* Shows the second level nav */ 
       $(mainSelector + ' a[@href^="' + fullPath + '"]').parents('li').addClass('current'); 
      } 
     } 
/* Highlights the currently selected first level tab */ 
     $(mainSelector + ' a[@href="' + pathFileName + '"]').parents('li').children('a').addClass('current'); 
/* Shows the second level nav */ 
     $(mainSelector + ' a[@href="' + pathFileName + '"]').parents('li').addClass('current'); 
     $('.current > ul').addClass('selected'); 

/* Bold selected second level item */ 
     $('li > ul > li.current').css({fontWeight:"bold", background:"url(/water/images/l2-arrow.gif) center bottom no-repeat"}); 
/* Bold selected third level item */ 
     $('#tocBody a[@href$="' + pathFileName + '"]').parents('li').addClass('tocSelected'); 
    } 
$('.nav-ul.selected').addClass('test'); 
}); 
+0

你可以发布javascript代码吗? – rahul 2010-02-08 05:59:09

回答

2

的线沿线的东西吗?

+0

谢谢,我会给你一个镜头。 – StefWill 2010-02-08 23:10:59

+0

大部分技巧都是这样,我只需要解决当你从其他第一级别鼠标滑出时如何显示当前UL。 谢谢你。 – StefWill 2010-02-08 23:16:48

+0

@aib,该代码在IE中不起作用... – StefWill 2010-02-12 04:27:48