У меня есть 3 меню в навигации, и каждое меню имеет подменю. Мне нужно сделать 2 действия при нажатии на меню или знак плюс/минус.
Первый акт: Когда я нажимаю:
this
подменюthis
плюс на минусВторой акт: Когда я снова нажимаю на элемент с открытым подменю,
Мой 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"> </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"> </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"> </div>
</li>
<ul class = "child-layer collapse">
<li>Sub Child 3</li>
<li>Sub Child 3</li>
<li>Sub Child 3</li>
</ul>
</ul>
$(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"> </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"> </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"> </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(<array>)
добавляет элементы в <array>
к существующему объекту в коде. Я добавляю элементы для выполнения следующих команд вместе с предыдущими объектами функции $()
выше
вы можете еще больше сократить мой код, переместив .add()
вверх на 2 строки и удалив .next().toggleClass(...)
из .add()
Спасибо за объяснение функции add()
здесь. Интересно, какой скрипт делает текущее открывающееся подменю закрытым после того, как вы нажмете на другое меню?
он ищет .opening
и закрывает их
Я пытаюсь выполнить те же действия, когда нажимаю знаки плюс и минус, но текущее открывающееся подменю не закрывается после нажатия на другое меню. Я только что обновил свой скрипт в своем фрагменте. Пожалуйста, посмотрите, чего не хватает
потому что this
ссылка неверна, пожалуйста, измените $('.parent-list.open').not(this)
на $('.parent-list.open').next().not(this ).prev()
и не обновляйте вопрос, мне сложно постоянно редактировать ответ
Интересно, почему в .add(...)
мы удаляем только класс open
(но не удаляем класс show
в .child-layer
, текущее открывающееся подменю будет закрыто после того, как мы нажмем на другое меню. Не могли бы вы объяснить?
так как класс .show
уже существует в их .child-layer
нам нужен только toggleClass
(команда ниже)
Привет, Тачибана Шин, спасибо! Ваш скрипт работает отлично. Пожалуйста, дайте мне знать, как '.add($('.parent-list.opening').not(this).removeClass('opening').next().toggleClass('icon-minus icon-plus '))' работает?