Открыть подменю на клике, jQuery

Я хочу, чтобы, если мы нажмем на список, в котором есть дочерние элементы, появится дочерняя ul (подменю). Стандартное меню - система подменю, которую мы видим вокруг. Я пробовал код, который не работает. Наверное, у вас есть идея?Открыть подменю на клике, jQuery

http://jsfiddle.net/JeremyCh/BjTYY/2/

<div class="menu"> 
    <ul> 
    <li class="page_item page-item-2"><a href="/accueil/">Accueil</a></li> 
    <li class="page_item page-item-8"><a href="/disciplines/">Disciplines</a> 
     <ul class='children'> 
     <li class="page_item page-item-19"><a href="/disciplines/galerie/">Galerie</a></li> 
     <li class="page_item page-item-21"><a href="/disciplines/definitions/">Définitions</a></li> 
     </ul> 
    </li> 
    <li class="page_item page-item-10"><a href="/professeurs/">Professeurs</a></li> 
    <li class="page_item page-item-11"><a href="/planning/">Planning</a></li> 
    <li class="page_item page-item-12"><a href="/tarifs/">Tarifs</a> 
     <ul class='children'> 
     <li class="page_item page-item-23"><a href="/tarifs/cours/">Cours</a></li> 
     <li class="page_item page-item-25"><a href="/tarifs/location/">Location</a></li> 
     </ul> 
    </li> 
    <li class="page_item page-item-13"><a href="/contact/">Contact</a></li> 
    </ul> 
</div> 


jQuery(document).ready(function() { 
    jQuery('.menu').find('> li').click(function() { 
     jQuery('.menu > li').not(this).find('ul').slideUp(); 
     jQuery(this).find('ul').stop(true, true).slideToggle(300); 
     return false; 
    }); 
})

источник

2013-03-16 Jeremy

Что означает «не работает» в контексте? Что вы ожидали от этого, чего не делали, что он сделал, чего вы не хотели, чтобы он делал, какие ошибки он генерировал? –

Хороший вопрос Дэвид. Я хочу, чтобы подменю открывалось, когда я нажимаю на родительские элементы. Я действительно искал стандартную систему меню/подменю, в которой подменю остаются скрытыми при загрузке страницы и отображаются, когда мы нажимаем элемент родительского списка. – Jeremy

@Jeremy - вы должны переместить вышеуказанный комментарий на вопрос, так как это часть вопроса, а не комментарий. – Hogan

Там вы идете ..

у присвоен класс .menu к неправильному элементу, присвоить его главной ул, теперь и можно стилизовать соответственно ..

HTML

<ul class="menu"> 
    <li class="page_item page-item-2"><a href="#">Accueil</a></li> 
    <li class="page_item page-item-8 current_page_item"><a href="#">Disciplines</a> 
    <ul class='children'> 
    <li class="page_item page-item-19"><a href="/disciplines/galerie/">Galerie</a></li> 
    <li class="page_item page-item-21"><a href="/disciplines/definitions/">Définitions</a></li> 
    </ul> 
</li> 
<li class="page_item page-item-10"><a href="/professeurs/">Professeurs</a></li> 
<li class="page_item page-item-11"><a href="/planning/">Planning</a></li> 
<li class="page_item page-item-12"><a href="/tarifs/">Tarifs</a> 
    <ul class='children'> 
    <li class="page_item page-item-23"><a href="/tarifs/cours/">Cours</a></li> 
    <li class="page_item page-item-25"><a href="/tarifs/location/">Location</a></li> 
    </ul> 
</li> 
<li class="page_item page-item-13"><a href="/contact/">Contact</a></li>

$('.menu').find('> li').click(function() { 
$('.menu > li').not(this).find('ul').slideUp(); 
$(this).find('ul').stop(true, true).slideToggle(400); 
return false; 
});

источник

2013-03-16 15:09:30 Nikhar

Спасибо Nikhar, это прекрасно. – Jeremy

Попробуйте изменить селекторы в вашем JQuery из jQuery('.menu').find('> li') и jQuery('.menu > li') к jQuery('.menu').find('> ul > li') и jQuery('.menu > ul > li').

Из того, что я знаю, селектор > выбирает на прямых дочерних потомках, то есть в этом случае ul, и, следовательно, li не являются дочерними потомками элемента div.menu.

источник

2013-03-16 15:08:04 Catlin

Открыть подменю на клике, jQuery

ответ

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