问题描述
我正在制作一个可折叠的手风琴，并发现了两件我想要改变的东西。我正在关注this website。我无法做一些事情。 就像悬停不一样，其次打开后颜色不同。请看一看并帮我弄清楚。
$(document).ready(function(){
$(".research-group-header").click(function(){
// self clicking close
if($(this).next(".research-group-body").hasClass("active")){
$(this).next(".research-group-body").removeClass("active").slideUp()
$(this).children("span").removeClass("fa-minus").addClass("fa-plus")
}
else{
$(".research-group .research-group-body").removeClass("active").slideUp()
$(".research-group .research-group-header span").removeClass("fa-minus").addClass("fa-plus");
$(this).next(".research-group-body").addClass("active").slideDown()
$(this).children("span").removeClass("fa-plus").addClass("fa-minus")
}
})
}) .sec{
max-width:800px;
display: block;
margin: auto;
}
.sec .research-group{
/*Box-shadow: 0px 0px 20px #d4d4d4;*/
margin-bottom: 2px;
float: left;
width: 100%;
}
.sec .research-group .research-group-header h3{
cursor: pointer;
color: #422b31;
position: relative;
background-color: #d8d8d8;
margin:0;
padding:15px 20px;
font-weight: 500;
font-size: 20px;
}
.sec .research-group .research-group-header {
position: relative;
}
.research-group-header:hover {
opacity: 0.2;
}
.sec .research-group .research-group-header span{
position: absolute;
right:20px;
top:12px;
height:25px;
width:25px;
color:#422b31;
/*background-color: #ffffff;*/
/*border-radius:50%;*/
text-align: center;
line-height:25px;
font-size: 20px;
}
.sec .research-group .research-group-body{
padding:20px;
}
.sec .research-group .research-group-body{
display: none;
}
.sec .research-group .research-group-body p{
font-size: inherit;
line-height: 24px;
color: #444444;
margin:0px;
} <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="sec">
<div class="research-group">
<div class="research-group-header">
<h3>heading One</h3>
<span class="fa fa-plus"></span>
</div>
<div class="research-group-body">
<p>
Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamLorem ipsum dolor sit amet,sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</p>
</div>
</div> <!-- research-group -->
<div class="research-group">
<div class="research-group-header">
<h3>heading Two</h3>
<span class="fa fa-plus"></span>
</div>
<div class="research-group-body">
<p>
Lorem ipsum dolor sit amet,sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</p>
</div>
</div> <!-- research-group -->
</div> <!-- sec -->我已经在 codepen
上编写了代码解决方法
嘿，为了让它按预期工作，所以改变了一些东西。
在悬停时设置背景颜色，而不是不透明度，这样您就不会影响子元素（文本颜色）。我猜你试过了，但它不起作用。这里的主要内容是 !important ，您可以将其放在 css 设置之后以赋予其优先级。我认为引导程序正在应用干扰的设置，所以请记住 !important;强制使用 css 属性。
另一件事是我为 header 元素添加了一个名为 header-active 的 css 类。并且只是以与正文类似的方式切换它，以在它处于活动状态时锁定更改。
希望您清楚发生了什么变化，这会有所帮助。
$(document).ready(function(){
$(".research-group-header").click(function(){
// handle state of header
if($(this).children("h3").hasClass("header-active")) {
$(this).children("h3").removeClass("header-active")
} else {
$("h3").removeClass("header-active")
$(this).children("h3").addClass("header-active")
}
// self clicking close
if($(this).next(".research-group-body").hasClass("active")){
$(this).next(".research-group-body").removeClass("active").slideUp()
$(this).children("span").removeClass("fa-minus").addClass("fa-plus")
}
else{
$(".research-group .research-group-body").removeClass("active").slideUp()
$(".research-group .research-group-header span").removeClass("fa-minus").addClass("fa-plus");
$(this).next(".research-group-body").addClass("active").slideDown()
$(this).children("span").removeClass("fa-plus").addClass("fa-minus")
}
})
}) .sec{
max-width:800px;
display: block;
margin: auto;
}
.sec .research-group{
/*box-shadow: 0px 0px 20px #d4d4d4;*/
margin-bottom: 2px;
float: left;
width: 100%;
}
.sec .research-group .research-group-header h3{
cursor: pointer;
color: #422b31;
position: relative;
background-color: #d8d8d8;
margin:0;
padding:15px 20px;
font-weight: 500;
font-size: 20px;
}
.sec .research-group .research-group-header {
position: relative;
}
.sec .research-group .research-group-header span{
position: absolute;
right:20px;
top:12px;
height:25px;
width:25px;
color:#422b31;
/*background-color: #ffffff;*/
/*border-radius:50%;*/
text-align: center;
line-height:25px;
font-size: 20px;
}
.sec .research-group .research-group-body{
padding:20px;
}
.sec .research-group .research-group-body{
display: none;
}
.sec .research-group .research-group-body p{
font-size: inherit;
line-height: 24px;
color: #444444;
margin:0px;
}
.research-group-body,.active {
background-color: #F4F4F4;
}
.header-active {
background-color: #F4F4F4 !important;
}
.research-group-header h3:hover {
background-color: #F4F4F4 !important;
} <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="sec">
<div class="research-group">
<div class="research-group-header">
<h3>Heading One</h3>
<span class="fa fa-plus"></span>
</div>
<div class="research-group-body">
<p>
Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamLorem ipsum dolor sit amet,sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</p>
</div>
</div> <!-- research-group -->
<div class="research-group">
<div class="research-group-header">
<h3>Heading Two</h3>
<span class="fa fa-plus"></span>
</div>
<div class="research-group-body">
<p>
Lorem ipsum dolor sit amet,sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</p>
</div>
</div> <!-- research-group -->
</div> <!-- sec -->