2015-06-01 3 views
1

У меня есть меню типа аккордеона, которое постепенно эволюционировало и теперь почти работает так, как я хочу. Он имеет три уровня: страну, регион и провинцию. Моя цель состоит в том, что когда вы нажимаете на страну, она скользит вниз, чтобы выявить регионы. Затем, как только это будет сделано, щелчок по стране снова свяжется с новой страницей. Аналогичным образом, нажатие на область сворачивает список провинций, а затем щелчок по региону снова связывается со страницей, относящейся к региону.Меню аккордеона jQuery с включенными/отключенными ссылками

Для этого у меня должны быть ссылки, которые разрешены и разрешены jQuery в соответствии с состоянием аккордеона. Я думаю, что это можно сделать с помощью preventDefault(), но мне пока не удалось его запустить.

function(e){ 
e.preventDefault() 
} 

Этот jSFiddle показывает мое текущее состояние прогресса. На данный момент нет ссылки на «Францию», чтобы регионы могли скользить вниз. В отдельных регионах есть ссылки, поэтому на данный момент они не будут развиваться, показывая провинции.

Я думаю, что я не за горами, но все попытки вставить строку preventDefault() (или вернуть false) не смогли получить желаемый эффект. Что я делаю не так?

EDIT

С помощью Жако, я добился хорошего прогресса. Исходная проблема решена. Я также добавил кнопку «Закрыть» внизу, чтобы пользователь мог сохранить меню в порядке и удобнее, если они захотят сделать много щелчков. Кажется, у меня осталось только одна проблема: после аккордеона в меню (скажем, в Франции) и снова закрыв его, нажатие на «Франция» снова открывает ссылку, а не снова открывает аккордеон. Другими словами, «return false» не работает после открытия и закрытия один раз. Может ли кто-нибудь навестить меня здесь?

Я обновил JSFiddle, чтобы отразить текущий прогресс.

ответ

0

Чтобы «переопределить» действие ссылки, вы можете просто использовать «return false»;

$(".leftnav a").click(
function(){ 
    var sub_nav = $(this).parent().find('ul').first(); 
    if(sub_nav.length > 0 && !sub_nav.is(":visible")) { 
     sub_nav.slideDown(800); 
     return false; 
    } 
}); 

На jsfiddle: https://jsfiddle.net/zrhefp2p/1/

+0

Благодаря Жако. Это почти работает, но все поля провинции открыты в ответ на щелчок по стране. Вместо того, чтобы просто открывать регионы, а затем щелкнуть область, чтобы открыть под ней провинции. Любая идея, как я могу настроить ваше предложение, чтобы это произошло? – TrapezeArtist

+0

Если вы замените var sub_nav = $ (this) .parent(). Find ('ul'); по var sub_nav = $ (this) .parent(). find ('ul'). first(); это должно быть поведение, которое вы ищете – Jako

+0

Пятно на! Большое спасибо. – TrapezeArtist

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