jquery show/hide breaks links

Question

I'm making a vertical navigation menu using css and jquery to make the submenus hidden by default but clicking on a menu item expands it to show the submenus.

<div id="navmenu">


<ul id="menu">
  <li><a href="welcome.html" target="content">Welcome</a>
    <ul class="hide">
     <li><a href="other.php" target="content">blank</a> </li>    
    </ul>  
  </li>

  <li><a href="view_form.php" target="content">Student Nurse</a></li>
  <li><a href="http://www.google.com" target="content">Internet</a></a></li>
  <li><a href="http://support.site" target="content">Support</a></li>
  <li><a href="">Policies</a>
   <ul class="hide">
    <li><a href="shared/Policies/ContactList.txt" target="content">Policy 1</a></li>   
   </ul>  
  </li>  
 </ul>
</div>

the jquery to make the submenus hide and show:

$('#menu li').css("margin-left","20px");

$('#menu li').toggle(
 function() {
            $(this).find('ul').show();
     },
     function() {
           $(this).find('ul').hide();
 });

This code works perfectly for expanding and collapsing the submenus, however, none of the links work now? I don't understand what I'm missing?

edit: firebug output:

<div id="navmenu">
   <ul id="menu">
    <li style="margin-left: 20px;">
       <a target="content" href="welcome.html">Welcome</a>
       <ul class="hide">
         <li style="margin-left: 20px;">
            <a target="content" href="view_form.php">a blank one here</a>
         </li>
       </ul>
     </li>
     <li style="margin-left: 20px;">
         <a target="content" href="view_form.php">Student Nurse</a>
     </li>
     <li style="margin-left: 20px;">
        <a target="content" href="http://www.google.com"&gt;Internet&lt;/a&gt;
     </li>
     <li style="margin-left: 20px;">
       <a target="content" href="http://support.site"&gt;Support&lt;/a&gt;
     </li>
     <li style="margin-left: 20px;">
        <a href="">Policies</a>
        <ul class="hide">
          <li style="margin-left: 20px;">
            <a target="content" href="shared/Policies/ContactList.txt">Policy 1</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>

so the links are correct even when the submenu's are expanded but they are still broken.

Answer 1

The toggle seems to override the link, you might need find a more specific filter to only toggle those with submenus.

Answer 2

Could it be that the links all work, but they're refreshing a different, specific browser window (one named "content") somewhere in your task bar?

Answer 3

Try it using

$('#menu li').toggleClass('hidden', 0);

OFC you must have a css class called hidden that contains display:none;

or something along those lines, depending on what you want to hide

Answer 4

You need to enable the default behavior of the 'a' with return true;. I added some classes to your HTML, and changed up the javascript a little.

EDIT: Deleted solution, because other problems cropped up.

I did find that if you add a click event handler to 'a', it will load the page. The event handler doesn't need to do anything at all.

Answer 5

try the following:

change the menu to:

<div id="navmenu">
 <ul id="menu">
  <li><div><a href="welcome.html" target="content">Welcome</a></div>
    <ul class="hide">
     <li><a href="other.php" target="content">blank</a> </li>    
    </ul>  
  </li>

  <li><a href="view_form.php" target="content">Student Nurse</a></li>
  <li><a href="http://www.google.com" target="content">Internet</a></a></li>
  <li><a href="http://support.site" target="content">Support</a></li>
  <li><div><a href="">Policies</a></div>
   <ul class="hide">
    <li><a href="shared/Policies/ContactList.txt" target="content">Policy 1</a></li>   
   </ul>  
  </li>  
 </ul>
</div>

and then change your javascript to the following:

$('#menu li:has(ul) > div').toggle(
    function() {
        $(this).next().show();
    },
    function() {
        $(this).next().hide();
    }
);