jquery heirarchical menu design

Question

edit: ok, the line:

$( <?php echo("'#".$_GET['item']."'")  ?> ).parent().show();

Is obviously and attempt to keep the menu open at the right place. I don't think this ever worked (got I hate working on other ppls code).

Then my current problem is how to access the <ul class="myul"> directly above the <li id="001" > using that item id=001 ??

Hi

I am trying to fix up a piece of code left to me by a now lost programmer. It works but there is a feature missing; I does not stay opened in the correct place when a menu item is selected.

Jquery:

$.swapImage(".swapImage");                                  
            $( <?php echo("'#".$_GET['item']."'")  ?> ).parent().show();
            $('.myul').hide();              
            $('.slide_ul li:not(:first-child)').hide();     
            $('.hideMe').click(function(){ 
                $(this).next('ul').slideToggle('fast').siblings('ul:visible').slideUp('fast');
            });                             
            $('.myul a').click(function(e){
                var url = $(this).attr('href');
                var index = url.indexOf('=');
                var substr = url.slice(index+1);                    
                $('#productContainer >div').hide();
                $('#productContainer').load("products/"+substr+"/product.html", function(){
                    $(this).fadeIn('slow'); 
                    var i = 0;
                    $('.slide_ul li:not(:first-child)').hide();                                                                             
                });                 
            });

HTML:

    <!-- Right Navigation -->
                        <div id="rightNav">
                            <div id="navMenu">
                                <h2 id="navMenuheader">Catalogue</h1>
                                <h3 class="hideMe">Widgets</h3>
                                <ul class="myul">
                                    <h4 class="hideMe">Widget Coins</h2>
                                    <ul class="myul">
                                        <li id="001" >
                                             <a href="products.php?item=001">The South African Widget</a>
                                          </li>

The result of the menu click is to injectContent into a black div in the middle of the page. Does $(document).ready(function(){ happen everytime this occurs? Otherwise I can't see why all the menu positions are updated.

I guess I need some more code to identify the place in the menu we are and leave them open. There are ants on my desk.

Answer 1

Just had to add some jquery to reopen the relevant section of the menu after it has all been hidden. So right after the line $('.myul').hide() I reopen the menu section based on the url query ( products.php?item=001 ):

var item =  <?php echo("'".$_GET['item']."'")  ?>;

                if (item != '')             
                {
                    item = "li#" + item;            
                    $(item).parent().show();
                    $(item).parent().parent().show();
                }

Answer 2

looks to me like the bad closing tag on

<h4 class="hideMe">Widget Coins</h2>

is your main problem, when it gets clicked on

$(this).next('ul')

fails to find a ul because it is a child instead of a sibling of the h4
changing it to

<h4 class="hideMe">Widget Coins</h4>

makes it work better, not sure if that was all you were looking for

$( <?php echo("'ul:has(#".$_GET['item'].")'");  ?> ).show();

will open every ul that has a descendant with the specified id
just using .parent() wasn't getting the top ul to show