JQuery показать / скрыть разрывы ссылок

Question

Я создаю вертикальное меню навигации, используя css и jquery, чтобы скрыть подменю по умолчанию, но нажатие на элемент меню расширяет его, чтобы показать подменю.

<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 для скрытия и отображения подменю:

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

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

Этот код отлично работает для расширения и свертывания подменю, однако, ни одна из ссылок не работает сейчас? Я не понимаю, чего мне не хватает?

редактировать: вывод firebug:

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

поэтому ссылки верны, даже если подменю раскрыты, но они все еще не работают.

Answer 1

попробуйте следующее:

изменить меню на:

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

, а затем измените свой JavaScript на следующее:

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

Answer 2

Вам необходимо включить стандартное поведение 'a' с помощью return true;. Я добавил несколько классов в ваш HTML и немного изменил JavaScript.

РЕДАКТИРОВАТЬ: Удалено решение, потому что другие проблемы возникли.

Я обнаружил, что если вы добавите обработчик события click в 'a', он загрузит страницу. Обработчику событий вообще не нужно ничего делать.

Answer 3

Может ли быть так, что все ссылки работают, но они обновляют другое, специфическое окно браузера (одно с именем "content") где-то на панели задач?

Answer 4

Попробуйте, используя

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

OFC у вас должен быть класс css с именем hidden, который содержит display: none;

или что-то в этом роде, в зависимости от того, что вы хотите скрыть

Answer 5

Переключатель, кажется, переопределяет ссылку, вам может понадобиться найти более специфический фильтр, чтобы переключать только те, которые имеют подменю.