Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.01.2020, 20:37
Интересующийся
Отправить личное сообщение для mbrogan Посмотреть профиль Найти все сообщения от mbrogan
 
Регистрация: 12.09.2016
Сообщений: 10

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

Структура:

<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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,540

mbrogan,
$(".second").click(function(e) {
    e.preventDefault();
    $(this).toggleClass('active');
 });
Ответить с цитированием
  #3 (permalink)  
Старый 13.01.2020, 21:09
Интересующийся
Отправить личное сообщение для mbrogan Посмотреть профиль Найти все сообщения от mbrogan
 
Регистрация: 12.09.2016
Сообщений: 10

Сообщение от рони Посмотреть сообщение
mbrogan,
$(".second").click(function(e) {
    e.preventDefault();
    $(this).toggleClass('active');
 });
По сути такой же скрипт, как и у меня, с точно таким же результатом
Ответить с цитированием
  #4 (permalink)  
Старый 13.01.2020, 21:12
Интересующийся
Отправить личное сообщение для mbrogan Посмотреть профиль Найти все сообщения от mbrogan
 
Регистрация: 12.09.2016
Сообщений: 10

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

$(".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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,540

mbrogan,
а так?
$(".second").on("click", ">:not(ul)", function(e) {
     $(e.delegateTarget).toggleClass('active');
 });
Ответить с цитированием
  #6 (permalink)  
Старый 14.01.2020, 09:13
Интересующийся
Отправить личное сообщение для mbrogan Посмотреть профиль Найти все сообщения от mbrogan
 
Регистрация: 12.09.2016
Сообщений: 10

Сообщение от рони Посмотреть сообщение
mbrogan,
а так?
$(".second").on("click", ">:not(ul)", function(e) {
     $(e.delegateTarget).toggleClass('active');
 });
Этот вариант вообще не раскрывает меню
Ответить с цитированием
  #7 (permalink)  
Старый 14.01.2020, 09:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,540

Сообщение от 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>
Ответить с цитированием
  #8 (permalink)  
Старый 14.01.2020, 18:39
Интересующийся
Отправить личное сообщение для mbrogan Посмотреть профиль Найти все сообщения от mbrogan
 
Регистрация: 12.09.2016
Сообщений: 10

Так то работает, но не в моем случае. У меня кроме подменю, еще и на меню назначена такая же функция. Попробуйте на все родительские пункты поставить, думаю, тоже будет сворачиваться при клике на дочерние. Рабочий вариант я прислал, если что.
Ответить с цитированием
  #9 (permalink)  
Старый 14.01.2020, 18:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,540

Сообщение от 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>
Ответить с цитированием
  #10 (permalink)  
Старый 14.01.2020, 22:01
Интересующийся
Отправить личное сообщение для mbrogan Посмотреть профиль Найти все сообщения от mbrogan
 
Регистрация: 12.09.2016
Сообщений: 10

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Снятие чекбокса при клике на пункт меню TSGH Элементы интерфейса 6 09.03.2018 09:21
Появление/исчезновение дива при клике на ссылку nickostyle jQuery 5 18.01.2016 03:03
Выпадающее меню при клике soltx Элементы интерфейса 1 04.09.2014 10:48
При клике в любом месте документа должен удаляться определенный id DorianLeroy jQuery 2 24.12.2011 21:05
Dojo может подгружать информацию из пунктов меню только при клике на выбранный пункт? vlad275 Dojo toolkit 0 30.10.2008 15:56