Переключить навигацию с двумя классами
Как я могу построить toggle li элемент с классом + или - на переключателе, а подменю отображается, а не отображается.
$(document).ready(function() {
$(".sub-menu").hide();
$(".sub-menu").parent('li').addClass('active');
$(".sub-menu").parent('li').click(function() {
$(".sub-menu").toggle("slow", function() {
if ($(this).is(':visible')) {
$(".sub-menu").parent('li').addClass('unactive');
} else {
$(".sub-menu").parent('li').addClass('active');
}
});
});
});.active::before {
content: '+';
}
.noactive::before {
content: '-';
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>Item1</li>
<li>Item2
<ul class = "sub-nav">
<li>Item2a</li>
<li>Item2b</li>
</ul>
</li>
</ul>+ и - не работает
1. Предоставляйте весь код, а не маленький кусочек. 2. Объясните, что вы подразумеваете под «это не работа». Чем вы занимаетесь? Что вы ожидаете увидеть? Что такое видеть на самом деле?
У меня есть подменю в основном, и на элементе li существует + при щелчке показать и скрыть подменю. - для скрытия подменю, и это не работает (я не вижу - в ли, не изменить).
Предоставьте свой код, чтобы мы могли видеть, что такое «подменю», что у вас есть в «li» и т. д.
Обратите внимание, что каждый раз, когда вы выполняете $(".sub-menu"), ваш код сканирует всю DOM в поисках этих элементов. Я рекомендую вначале сохранить его как переменную и избегать чрезмерных повторных поисков.
@showdev - Это редактирование кажется немного вводящим в заблуждение, не так ли? Насколько я могу судить, OP никогда не предоставлял HTML. Не говоря уже о том, что этот HTML не соответствует коду.
@TylerRoper OP предоставил HTML в комментарии, который с тех пор был удален. Я должен был упомянуть об этом в своем комментарии к редактированию. Я добавил библиотеку jQuery, так как это требовалось кодом. Редактирование следует отменить, если оно будет сочтено вводящим в заблуждение.
Ответы 1
Прежде всего, у вас была опечатка в именовании классов, но это не решает проблему, так как последний класс css сильнее, после его назначения он не меняется при следующем щелчке. Попробуйте использовать элемент span вместо классов здесь:
<ul>
<li>Item1</li>
<li><span>+</span>Item2
<ul class = "sub-menu">
<li>Item2a</li>
<li>Item2b</li>
</ul>
</li>
И затем вы можете использовать функцию .text(), чтобы изменить ее значение при нажатии:
$(document).ready(function() {
$(".sub-menu").hide();
$(".sub-menu").parent('li').click(function() {
$(".sub-menu").toggle("slow", function() {
if ($(this).is(':visible')) {
$("span").text('-');
} else {
$("span").text('+');
}
});
});
});
Что такое вопрос?