2015-08-29 2 views
-1

Я пробовал несколько месяцев, чтобы найти соединение с моим меню, но, к сожалению, мне не повезло. Я не знаю, что еще я могу попробовать, поэтому я хочу спросить вас, ребята, если вы можете помочь. Я искал вокруг здесь Stack для идеи, это как-то описать функцию, которую я хочу, но я бы хотел использовать способ атрибута data вместо href, и я хочу использовать функцию on click вместо зависания, так как это для настольный и мобильный. Я также хочу закрыть подменю с меню a на настольной версии, переключится ли опция? ссылка: jquery dropdown with separate containerменю с отдельными разделами div

HTML

<div class="menu"> 
    <ul> 
     <li><a href="javascript:void(0);" data-section="one">item1</a></li> 
     <li><a href="javascript:void(0);" data-section="two">item2</a></li> 
     <li><a href="javascript:void(0);" data-section="three">item3</a></li> 
    </ul> 
</div> 
<div class="submenu"> 
    <ul> 
     <li class="one">content1</li> 
     <li class="two">content2</li> 
     <li class="three">content3</li> 
    </ul> 
</div> 

содержимое из подменю уль Li устанавливается на высоте: 0, что я хочу, чтобы установить в автоматический режим при запуске, или, возможно, добавить класс в подменю уль Li:

.submenu ul li{ 
    display:block; 
    overflow:hidden; 
    height:0; 
.submenu ul li.active{ 
    height:auto; 
} 

JS Fiddle

+0

Вы хотите, чтобы подменю было открыто, когда кто-то щелкает родительский элемент в главном меню? –

+0

Вы хотите скрыть подменю от показа или хотите анимировать закрывающее событие? В вашем вопросе используется несколько разных терминов: close, toggle, и я не совсем уверен, какое поведение вы ищете. – Fred

+0

Не было бы проще, если бы вы вложили элементы подменю в заголовки меню? Похоже, это тоже семантика. –

ответ

2

Я не уверен, если это то, что вы хотите, но попробуйте заменить

$(this).attr('data-section').slice(1) 

с этим

$(this).attr('data-section') 

jsfiddle (основано в вашей)

+0

ха-ха, это действительно работает. блестящий. Теперь все, что мне нужно сделать, это использовать тот же .menu li a, чтобы закрыть меню снова, если пользователь хочет это сделать. Любые идеи @MuZk? –

+1

Вы можете спросить, есть ли у вашей цели лития уже класс. Если да, то просто удалите класс. Проверьте это: https://jsfiddle.net/78mpwLq4/5/ – muZk

+0

Я так благодарен вам за помощь в этом. Спасибо. –

0

Просто удалите .slice (1). Я не знаю, почему вы добавляете это.

Когда вы нажимаете на ссылку меню, jquery удалит активный класс из списка и добавит новую ссылку, связанную с ссылкой меню по разделу данных.

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