Отключение после нажатия addClass
Я действительно новичок в jQuery. Я взял некоторый код для моего меню WordPress из какого-то учебника, но я хочу добавить к нему некоторые настройки. Итак, что я ищу, так это когда li с классом «has-sub» щелкается, и он добавляет класс «open». -sub", чтобы добавить класс "отключено". Моя цель - выделить серым цветом другие пункты меню с помощью стилей CSS, чтобы он сосредоточился на том, что было кликом. Это возможно. Вот код jquery, который у меня есть.
$('#cssmenu li.has-sub>a').on('click', function(){
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').hide();
}
else {
element.addClass('open');
element.children('ul').show();
element.siblings('li').children('ul').hide();
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').hide();
}
});
Итак, вы в основном хотите «подсветить» элемент, по которому щелкнули... Можете ли вы опубликовать визуализированную структуру? и классы CSS, которые вы имеете в виду...
Ответы 1
Я думаю, что вам нужно просто добавить и удалить классы CSS.
При нажатии добавьте greyed и удалите highlighted для всех элементов..
Инверсия для выбранного элемента.
Если вы просто улучшите стиль (в этой демонстрации не было никаких усилий) переключения двух классов... У вас есть стартер.
Что-то типа:
$('#cssmenu li.has-sub a').on('click', function(e){
e.preventDefault();
$(".has-sub").removeClass("highlighted").addClass("greyed");
$(this).parents(".has-sub").addClass("highlighted").removeClass("greyed");
});a{
text-decoration:none;
color:black;
}
.highlighted{
background-color:cyan;
}
.highlighted a{
color:red;
}
.greyed{
background-color:#bbb;
}
.greyed a{
color:#444;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id = "cssmenu">
<li class = "has-sub">
<ul>
<li>
<a href = "#">Anchor</a>
</li>
<li>
<a href = "#">Anchor</a>
</li>
<li>
<a href = "#">Anchor</a>
</li>
<li>
<a href = "#">Anchor</a>
</li>
</ul>
</li>
<li class = "has-sub">
<ul>
<li>
<a href = "#">Anchor</a>
</li>
<li>
<a href = "#">Anchor</a>
</li>
<li>
<a href = "#">Anchor</a>
</li>
<li>
<a href = "#">Anchor</a>
</li>
</ul>
</li>
<li class = "has-sub">
<ul>
<li>
<a href = "#">Anchor</a>
</li>
<li>
<a href = "#">Anchor</a>
</li>
<li>
<a href = "#">Anchor</a>
</li>
<li>
<a href = "#">Anchor</a>
</li>
</ul>
</li>
</ul>Некоторые из моих ссылок не будут иметь подменю под ними, но я думаю, что это привело меня в правильном направлении, спасибо
Звучит неправильно. Допустим, у вас есть список ссылок, выделенных синим цветом. Я нажимаю на одну, и она становится красной (добавлен класс «открыть», который делает ее красной), но зачем мне делать все мои ссылки серыми? Они больше не кликабельны? Я думаю, что вы хотите сделать, это удалить открытый класс из всех ссылок и добавить его только к той, по которой щелкнули. Таким образом, только одна ссылка, на которую нажали, будет красной.