Как переключить дочерние элементы элемента списка с определенным классом - PullRequest
Новая
       12

Как переключить дочерние элементы элемента списка с определенным классом

0 голосов
/ 13 сентября 2011

Как я могу использовать jQuery для .toggle sub-menu для li с классом menu-item после того, как пользователь нажмет на родителя li. Меню следует этому шаблону: 

   <ul class="menu">
        <li class="menu-item"><a href="#">Click Here To Toggle Child UL</a>
            <ul class="sub-menu"><!-- Toggle all this -->
                <li class="menu-item"><a href="..">Sub Menu Item 1</a></li>
                <li class="menu-item"><a href="..">Sub Menu Item 2</a></li>
            </ul><!-- Toggle all this -->
        </li>
        <li class="menu-item"><a href="#">Menu Item Without Children</a></li>
    </ul>

Я знаю, что мне нужно проверить, есть ли у li с классом menu-item дочерний элемент ul с классом sub-menu, если так, то переключите этот ul. Но я не знаю, как было бы лучше написать код для этого. Любая помощь будет оценена.

Ответы [ 2 ]

0 голосов
/ 13 сентября 2011

protectDefault или возврат false, чтобы не активировать действие по умолчанию для элементов привязки:

http://jsbin.com/itegun/edit#javascript,html,live

0 голосов
/ 13 сентября 2011

Используйте следующее с использованием библиотеки jQuery: 

$('.menu > .menu-item:has(ul) > a').click(function() {
    $(this).siblings('ul').toggle();
    return false;
});

jsfiddle: http://jsfiddle.net/GGg44/3/

...