jquery show/hide breaks links

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

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

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

редактировать: выход поджигатель:

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

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

источник

2010-02-07 Matt Phillips

У вас есть кадр с именем "содержание" на страница? – Sinan

есть. Если я удалю часть id = "menu" из первой ul, ссылки работают нормально, но я, очевидно, теряю расширяющиеся списки. –

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

изменения меню для:

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

источник

2010-02-07 20:42:50

, это сработало эффектно! Я получаю то, что вы делаете, но мне любопытно, почему добавление тегов div заставило ссылки работать снова? –

Функция переключения работает, когда вы нажимаете содержимое (html) тега, к которому вы прикрепляете функцию. Поэтому вам нужно было укоренить ссылку. Фактически вы можете обернуть все ссылки в тегах div. –

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

источник

2010-02-07 19:31:39

, но даже ссылки подменю сломаны. Как будто они больше не являются ссылками. –

Используйте firebug, чтобы узнать наверняка. Или отправьте нам прямую ссылку для проверки. –

Возможно ли, что все ссылки работают, но они обновляют другое конкретное окно браузера (одно из которых называется «контент») где-то в вашей панели задач?

источник

2010-02-07 19:35:43

нет. На странице есть фрейм, который содержит это меню в рамке слева, а затем рамка «контент» находится справа от страницы и содержит все ссылки, на которые указывает ссылка. Как я уже сказал в своем комментарии выше, я знаю, что ссылки работают, когда я забираю jquery, но это побеждает мою цель, потому что тогда у меня нет расширяющихся меню. –

Хорошо. Можете ли вы использовать firebug, чтобы узнать, что происходит с элементами 'a'? Например, теряют ли они свой 'href', или что-то еще движется поверх них, что делает их непривлекательными? –

Попробуйте его с помощью

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

OFC вы должны иметь класс CSS под названием скрытый, который не содержит дисплей: нет;

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

источник

2010-02-07 19:46:21

это дает мне тот же результат, что и раньше.Подменю расширяется и сокращается, когда вы нажимаете на элемент меню, но нажатие на элемент подменю не приведет вас к ссылке –

Вам необходимо включить поведение по умолчанию «A» с return true;. Я добавил несколько классов в ваш HTML-код и немного изменил javascript.

EDIT: Удаленное решение, потому что возникли другие проблемы.

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

источник

2010-02-07 20:28:27 user113716

jquery show/hide breaks links

ответ

Смежные вопросы