Закрытие дочернего меню при повторном клике на родительское
Здравствуйте. Не получается заставить корректно работать раскрывающееся меню. Задача - при повторном клике на родительский элемент закрывать дочерний.
Структура: <li class="first"><span>Пункт 1</span> <ul class="first-child"><li class="second"><span>Подпункт</span><ul class="first-child-child"><li class="third">Под-подпункт 1</li></ul></li> Скрипт раскрытия меню
$(".second").click(function(e) {
e.preventDefault();
$(".second").removeClass('active');
$(this).addClass('active');
});
Но проблема в том, что этот скрипт действует и на дочерних элементах. И когда я ставлю проверку на наличие класса 'active', и удаления его при повторном клике - скрипт срабатывает на клике внутри дочернего меню и оно сворачивается.
if($('.second').hasClass('active')) {
$('.second').removeClass('active'); }
Вопрос: как поставить проверку наличия класса 'active' только на клик родительского элемента исключая это действие внутри дочерних? Спасибо:yes: |
mbrogan,
$(".second").click(function(e) {
e.preventDefault();
$(this).toggleClass('active');
});
|
Цитата:
|
Рабочее решение:
$(".second").click(function(e) {
if($(this).hasClass('active') && $(this).has(e.target).length === 0) {
$(this).removeClass('active'); } else {
e.preventDefault();
$(".second").removeClass('active');
$(this).addClass('active'); }
});
|
mbrogan,
а так?
$(".second").on("click", ">:not(ul)", function(e) {
$(e.delegateTarget).toggleClass('active');
});
|
Цитата:
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.second > ul{
display: none;
}
.second.active > ul{
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".second").on("click", ">:not(ul)", function(e) {
$(e.delegateTarget).toggleClass('active');
});
});
</script>
</head>
<body>
<li class="first"><span>Пункт 1</span>
<ul class="first-child">
<li class="second"><span>Подпункт</span>
<ul class="first-child-child">
<li class="third">Под-подпункт 1</li>
</ul>
</li>
<li class="second"><span>Подпункт</span>
<ul class="first-child-child">
<li class="third">Под-подпункт 1</li>
</ul>
</li>
</ul>
</li>
</body>
</html>
|
Так то работает, но не в моем случае. У меня кроме подменю, еще и на меню назначена такая же функция. Попробуйте на все родительские пункты поставить, думаю, тоже будет сворачиваться при клике на дочерние. Рабочий вариант я прислал, если что.
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
li > ul{
display: none;
}
li.active > ul{
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$("li").on("click", ">:not(ul)", function(e) {
$(e.delegateTarget).toggleClass('active');
});
});
</script>
</head>
<body>
<li class="first"><span>Пункт 1</span>
<ul class="first-child">
<li class="second"><span>Подпункт</span>
<ul class="first-child-child">
<li class="third">Под-подпункт 1</li>
</ul>
</li>
<li class="second"><span>Подпункт</span>
<ul class="first-child-child">
<li class="third">Под-подпункт 1</li>
</ul>
</li>
</ul>
</li>
</body>
</html>
|
Этот работает, но не у меня) У меня еще скрипт на закрытие остальных подменю стоит.
|
| Часовой пояс GMT +3, время: 10:37. |