Я делаю сайт как проект для своего класса (использую HTML, CSS, JavaScript в основном для регулярных выражений и jQuery для эффектов).Вот что я застрял на следующем:
Я пытался покрасить активный тег li (он имеет вложенный тег ul с 1 элементом li), скажем, colorэто верхняя и нижняя границы, раскрасьте текст родительского тега li, удалите плюс Font Awesome и добавьте минус.Таким образом, по умолчанию минус скрыт, плюс активен и окрашен в красный цвет, текст родительского тега li белый, а его верхняя часть и границы бота 1px сплошные и серые.Когда я нажимаю на него, я хочу, чтобы он выпал (что уже есть), удалил красный плюс, добавил знак минус, покрасил текст тега li в красный и сделал его границы 2px сплошными красными (сверху и снизу).
<div id="wrapperFAQ">
<h2 id="h2FAQ">Frequently Asked Questions</h2>
<ul id="listaPitanja">
<li><i class="fas fa-plus activeTab"></i><i class="fas fa-minus"></i> Who are we?
<ul>
<li>You can find more about us on our <a href="#">about us</a> page.</li>
</ul>
</li>
<li><i class="fas fa-plus activeTab"></i><i class="fas fa-minus"></i> What products do we have?
<ul>
<li>a</li>
</ul>
</li>
<li><i class="fas fa-plus activeTab"></i><i class="fas fa-minus"></i> I have a hardware issue!
<ul>
<li></li>
</ul>
</li>
<li><i class="fas fa-plus activeTab"></i><i class="fas fa-minus"></i> Where can I find your shop?
<ul>
<li></li>
</ul>
</li>
<li><i class="fas fa-plus activeTab"></i><i class="fas fa-minus"></i> Will you have "x" products in the future?
<ul>
<li></li>
</ul>
</li>
</ul>
<p>Can't find your question on the list?
Send us an <a href="#">e-mail!</a></p>
</div>
Это был HTML, это CSS:
#wrapperFAQ{
width: 80%;
padding:15px;
margin: 0px auto;
}
#h2FAQ{
font-size:4vw;
color:red;
float:left;
border-bottom:3px solid red;
border-left:5px solid red;
}
#listaPitanja{
float:left;
margin: 10px 20px;
padding: 5px 20px;
}
#listaPitanja li{
cursor:pointer;
border-top:1px solid gray;
border-bottom:1px solid gray;
padding: 15px;
}
.fa-minus::before,.fa-plus::before{
color:red;
}
#listaPitanja li ul,.fa-minus::before{
display:none;
}
#listaPitanja, #listapitanja li ul{
list-style:none;
width: 85%;
margin: 0px auto;
color:white;
margin: 10px 0px 0px 15px;
}
#listaPitanja li ul li{
border:none;
}
.activeTab{
display:block;
}
#wrapperFAQ p, #wrapperFAQ p a{
font-size:2vw;
color:gray;
font-weight:strong;
text-align:center;
text-decoration:none;
width: 69%;
}
.aktivna{
border-top: 2px solid red !important;
color: red;
}
Это jQuery:
$('#wrapperFAQ ul > li ul')
.click(function(e){
e.stopPropagation();
})
.filter(':not(:first)')
.hide();
$('#wrapperFAQ ul li').click(function(){
var selfClick = $(this).find('ul:first').is(':visible');
if(!selfClick) {
$(this)
.parent()
.find('> li ul:visible')
.slideToggle();
$(this).addClass("aktivna");
}
$(this)
.find('ul:first')
.stop(true, true)
.slideToggle()
});
Теперь я скопировал этот точный кодиз файла, который я нашел в Интернете, я понимаю большинство из них, за исключением части «stopPropagation», это аргумент «е» (даже не знаю, откуда он) и что он должен делать, потому что когда я его удаляю, ничегонежелательное происходит визуально.
Кроме того, вы можете видеть, что я добавил класс «активна» в «активное» меню (сам класс в CSS имеет только цвет: красный; границы сверху и снизу установлены на 2 пикселя сплошным красным цветом с!важно в конце).Проблема в том, как мне, используя мой существующий код, реализовать «неактивный» способ;точнее говоря, если я открою другую вкладку, я хочу, чтобы класс по активному тегу li был удален и добавлен к другому (открытие одного закрывает последнюю).Я попробовал поиграться с кодом;например, я попытался перейти к родителю $ (this) после его переключения и удаления класса, но в результате я получаю, что активная вкладка получает class = "" ... Это меня несколько смущает, может быть, яя немного не понимаю, как работает мой код, я не знаю, вот где я застрял;цвет, границы, изменение плюса на минус и наоборот при переключении с активного на неактивный и т. д. Прошу прощения за длинный пост