Форум

mbrogan · #1 (**permalink**) 13.01.2020, 20:37

Здравствуйте. Не получается заставить корректно работать раскрывающееся меню. Задача - при повторном клике на родительский элемент закрывать дочерний.

Структура:

<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' только на клик родительского элемента исключая это действие внутри дочерних?

Спасибо

рони · #2 (**permalink**) 13.01.2020, 20:53

mbrogan,

$(".second").click(function(e) {
    e.preventDefault();
    $(this).toggleClass('active');
 });

mbrogan · #3 (**permalink**) 13.01.2020, 21:09

Сообщение от рони

mbrogan,

$(".second").click(function(e) {
    e.preventDefault();
    $(this).toggleClass('active');
 });

По сути такой же скрипт, как и у меня, с точно таким же результатом

mbrogan · #4 (**permalink**) 13.01.2020, 21:12

Рабочее решение:

$(".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'); }
});

рони · #5 (**permalink**) 13.01.2020, 21:19

mbrogan,
а так?

$(".second").on("click", ">:not(ul)", function(e) {
     $(e.delegateTarget).toggleClass('active');
 });

mbrogan · #6 (**permalink**) 14.01.2020, 09:13

Сообщение от рони

mbrogan,
а так?

$(".second").on("click", ">:not(ul)", function(e) {
     $(e.delegateTarget).toggleClass('active');
 });

Этот вариант вообще не раскрывает меню

рони · #7 (**permalink**) 14.01.2020, 09:26

Сообщение от mbrogan

не раскрывает меню

сделайте минимальный макет!

<!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>

mbrogan · #8 (**permalink**) 14.01.2020, 18:39

Так то работает, но не в моем случае. У меня кроме подменю, еще и на меню назначена такая же функция. Попробуйте на все родительские пункты поставить, думаю, тоже будет сворачиваться при клике на дочерние. Рабочий вариант я прислал, если что.

рони · #9 (**permalink**) 14.01.2020, 18:42

Сообщение от mbrogan

Попробуйте на все родительские пункты поставить

а самому проверить?

<!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>

mbrogan · #10 (**permalink**) 14.01.2020, 22:01

Этот работает, но не у меня) У меня еще скрипт на закрытие остальных подменю стоит.

Форум

Справочник

Discord чат

Курсы javascript