0

I have a nested list.
The nav-ul is hidden unless you are on that page, in which case jQ adds the class selected.
I have written a jQuery script to handle the highlighting of the current location but what I am having trouble with is hiding the nav-ul when you hover over a top level li.

Item 1 | Item 2 | Item 3 |
Item 1.1 | Item 1.2 | Item 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>

Hope that makes sense...

Please forgive my code, this is my first attempt at jQuery.

$(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');
});
1
  • Can you post the javascript code also? Commented Feb 8, 2010 at 5:59

1 Answer 1

2

Something along the lines of:

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

?

Sign up to request clarification or add additional context in comments.

1 Comment

That does the trick for the most part, I just need to work out how to show the current UL when you mouse out from the other first level li. Thanks for that.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.