Один клик в навигационном меню Запуск нескольких действий

У меня есть 3 меню в навигации, и каждое меню имеет подменю. Мне нужно сделать 2 действия при нажатии на меню или знак плюс/минус.

Первый акт: Когда я нажимаю:

  1. показать this подменю
  2. поменяй знак this плюс на минус
  3. Закрыть другие подменю
  4. Измените знаки других подменю с минуса на плюс

Второй акт: Когда я снова нажимаю на элемент с открытым подменю,

  1. подменю будет закрыто.
  2. знак минус меняется на плюс

Мой JQuery работает, как и ожидалось, в первом акте, но почему-то не работает во втором акте.

Пожалуйста, дайте мне руку. Спасибо

$(function(showHidesubMenu) {
$('.parent-list').click(function() {
  $(this)
    .toggleClass('open').next().toggleClass('icon-minus icon-plus')
    .add($('.parent-list.open').not(this).removeClass('open').next().toggleClass('icon-minus icon-plus'))
    .parent().next('.child-layer').toggleClass('show')
})
  })

$(function() {
$('.plus-minus').click(function() {
$(this)
.prev().toggleClass('open')
.next().toggleClass('icon-minus icon-plus')
.add($('.parent-list.open').not(this).removeClass('open'))
.parent().next('.child-layer').toggleClass("show");
})
})
li {
  display: flex
}
.icon-plus:before {
  content: "\2795";
}
.icon-minus:before {
  content: "\2212";
}
.parent-list {
  padding-right: 50px;
  cursor: pointer;
}
.collapse {
  display: none;
}
.show {
  display: block;
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
  <li class = "non-active">
    <a class = "non-active parent-list" href = "#level1">level 1</a>
    <div class = "plus-minus icon-plus">&nbsp;</div>
  </li>
  <ul class = "child-layer collapse">
     <li>Sub Child 1</li>
     <li>Sub Child 1</li>
     <li>Sub Child 1</li>
 </ul>
   <li class = "non-active">
    <a class = "non-active parent-list" href = "#level2">level 2</a>
    <div class = "plus-minus icon-plus">&nbsp;</div>
  </li>
  <ul class = "child-layer collapse">
     <li>Sub Child 2</li>
     <li>Sub Child 2</li>
     <li>Sub Child 2</li>
 </ul>
   <li class = "non-active">
    <a class = "non-active parent-list" href = "#level3">level 3</a>
    <div class = "plus-minus icon-plus">&nbsp;</div>
  </li>
  <ul class = "child-layer collapse">
     <li>Sub Child 3</li>
     <li>Sub Child 3</li>
     <li>Sub Child 3</li>
 </ul>
</ul>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
53
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

$(function(showHidesubMenu) {
  $('.parent-list').click(function() {
    $(this)
      .toggleClass('opening') // add class mark this opening
      .next()
      .toggleClass('icon-minus icon-plus')
      .add(
        $('.parent-list.opening')
          .not(this)
          .removeClass('opening')
          .next()
          .toggleClass('icon-minus icon-plus')
      )
      // to parent toogle ul
      .parent()
      .next('.child-layer')
      .toggleClass('show')
  })
})
li {
  display: flex
}
.icon-plus:before {
  content: "\2795";
}
.icon-minus:before {
  content: "\2212";
}
.parent-list {
  padding-right: 50px;
  cursor: pointer;
}
.collapse {
  display: none;
}
.show {
  display: block;
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
  <li class = "non-active">
    <a class = "non-active parent-list" href = "#level1">level 1</a>
    <div class = "plus-minus icon-plus">&nbsp;</div>
  </li>
  <ul class = "child-layer collapse">
     <li>Sub Child 1</li>
     <li>Sub Child 1</li>
     <li>Sub Child 1</li>
 </ul>
   <li class = "non-active">
    <a class = "non-active parent-list" href = "#level2">level 2</a>
    <div class = "plus-minus icon-plus">&nbsp;</div>
  </li>
  <ul class = "child-layer collapse">
     <li>Sub Child 2</li>
     <li>Sub Child 2</li>
     <li>Sub Child 2</li>
 </ul>
   <li class = "non-active">
    <a class = "non-active parent-list" href = "#level3">level 3</a>
    <div class = "plus-minus icon-plus">&nbsp;</div>
  </li>
  <ul class = "child-layer collapse">
     <li>Sub Child 3</li>
     <li>Sub Child 3</li>
     <li>Sub Child 3</li>
 </ul>
</ul>

Привет, Тачибана Шин, спасибо! Ваш скрипт работает отлично. Пожалуйста, дайте мне знать, как '.add($('.parent-list.opening').not(this).removeClass('openi‌​ng').next().toggleCl‌​ass('icon-minus icon-plus '))' работает?

abcid d 10.02.2023 17:46

в основном .add(<array>) добавляет элементы в <array> к существующему объекту в коде. Я добавляю элементы для выполнения следующих команд вместе с предыдущими объектами функции $() выше

Tachibana Shin 10.02.2023 17:49

вы можете еще больше сократить мой код, переместив .add() вверх на 2 строки и удалив .next().toggleClass(...) из .add()

Tachibana Shin 10.02.2023 17:51

Спасибо за объяснение функции add() здесь. Интересно, какой скрипт делает текущее открывающееся подменю закрытым после того, как вы нажмете на другое меню?

abcid d 10.02.2023 18:27

он ищет .opening и закрывает их

Tachibana Shin 10.02.2023 18:34

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

abcid d 10.02.2023 18:53

потому что this ссылка неверна, пожалуйста, измените $('.parent-list.open').not(this) на $('.parent-list.open').next().not(this ).prev() и не обновляйте вопрос, мне сложно постоянно редактировать ответ

Tachibana Shin 11.02.2023 04:33

Интересно, почему в .add(...) мы удаляем только класс open (но не удаляем класс show в .child-layer, текущее открывающееся подменю будет закрыто после того, как мы нажмем на другое меню. Не могли бы вы объяснить?

abcid d 11.02.2023 15:31

так как класс .show уже существует в их .child-layer нам нужен только toggleClass (команда ниже)

Tachibana Shin 11.02.2023 16:08

Другие вопросы по теме