Jquery show / hide link breaks

Question

I am making a vertical navigation menu using css and jquery to make the submenu hidden by default, but clicking on a menu item expands it to display the submenu.

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

jquery so that 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 great for expanding and collapsing submenus, however, none of the links work now? I do not understand what I am 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">Internet</a>
     </li>
     <li style="margin-left: 20px;">
       <a target="content" href="http://support.site">Support</a>
     </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>

therefore, the links are correct even when the submenu expands, but they are still broken.

Answer 1

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();
    }
);

Answer 2

'a' return true;. HTML- javascript.

EDIT: , .

, click 'a', . .

Answer 3

, , , , .

Answer 4

, , ( "" ) - ?

Answer 5

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

OFC css, hidden, display: none;

- , ,