【发布时间】：2019-06-26 14:42:09
【问题描述】：
我正在为我的班级制作一个网站作为项目（使用 HTML、CSS、JavaScript 主要用于正则表达式和 jQuery 用于效果）。我一直坚持的事情如下：
我一直在尝试为处于活动状态的 li 标签着色（它有一个嵌套的 ul 标签，其中包含 1 个 li 元素），例如为它的顶部和底部边框着色，为父 li 标签的文本着色并删除字体真棒的加号和减号。因此，默认情况下，减号是隐藏的，加号是活动的并且是红色的，父 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”部分，它是“e”参数（甚至不知道它来自哪里）以及它是什么应该这样做，因为当我删除它时，视觉上不会发生任何不想要的事情。
此外，您可以看到我确实将“aktivna”类添加到“活动”菜单中（CSS 中的类本身只有颜色：红色；边框顶部和底部设置为 2px 纯红色，!important 在结尾）。问题是，我如何使用现有代码实现“非活动”方式；更准确地说，如果我打开另一个选项卡，我希望将活动 li 标签上的类删除并添加到另一个（打开一个关闭最后一个）。我确实尝试过摆弄代码；例如，我在切换 $(this) 并删除类后尝试移动到 $(this) 的父级，但我得到的结果是活动选项卡获取 class=""...这让我很困惑，也许我是对我的代码如何工作有一点误解，我不知道，这就是我坚持的地方；颜色，边框，从活动切换到非活动时将加号更改为减号，反之亦然等。抱歉，长篇文章
【问题讨论】：
标签： jquery html css colors html-lists