个人中心
gpt4 book ai didi

html - 如何更改折叠子元素的背景颜色并使其组合在一起？

转载 作者：行者123 更新时间：2023-11-28 15:04:41 27 4
gpt4 key购买 nike

我做了一个复选框，当它被选中时，折叠元素会出现背景颜色。元素首先出现然后背景颜色发生变化。我希望这应该一起发生。我做了一个 fiddle https://jsfiddle.net/Priom/ad3m7nsk/8/

这是标记----

<div class="container-fluid">
      <div class="col-md-12">
        <h1>I am an experienced Engineer because</h1>
      </div>
      <div class="col-md-12">
        <label>
                    <h3>1) I have an engineering degree
                        <span><input type="checkbox" class="check1" data-toggle='collapse' data-target='#collapsediv1' aria-expanded="false" aria-controls="collapsediv1"></span></h3>
                    </label>
        <div class="col-md-12 collapse" id="collapsediv1" aria-expanded="false">
          <p>Sorry engineering degree is useles.Please wait for your practilal engineering training</p>
        </div>
      </div>
      <div class="col-md-12">
        <label>
                        <h3>2) I have an engineering job
                            <span><input type="checkbox" class="check2" data-toggle='collapse' data-target='#collapsediv2' aria-expanded="false" aria-controls="collapsediv2"></span></h3>
                        </label>
        <div class="col-md-12 collapse" id="collapsediv2" aria-expanded="false">
          <p>Having jsut an Engineering degree is just not good enough</p>
        </div>
      </div>
  </div>

这是CSS

::-webkit-scrollbar {
  width: 0px !important;
}
.pad {
  padding-top: 8px;
}

.back {
  background-color: #E9ECEF;
  padding-top: 13%;
  padding-bottom: 13%;
}

h1 {
  color: #0000FE;
  font-weight: bold;
  font-size: 30px;
}
.collapse p {
  padding: 10px;
  margin-left: 5px;
  margin-right: 5px;
  border: 1px #FFEEBA solid;
  background-color: #F2DEDE;
}
h3 {
  font-weight: bold;
}

提前致谢。

最佳答案

出现问题是因为在单击时，collapsing 类附加到该元素。 collpasing 类有不同的填充且没有背景色。

一个快速的解决办法是改变这个

.collapse p {
  padding: 10px;
  margin-left: 5px;
  margin-right: 5px;
  border: 1px #FFEEBA solid;
  background-color: #F2DEDE;
  /*-webkit-transition: 0.5s ease-out;*/
}

进入这个

.collapse p, .collapsing p {
  padding: 10px;
  margin-left: 5px;
  margin-right: 5px;
  border: 1px #FFEEBA solid;
  background-color: #F2DEDE;
  /*-webkit-transition: 0.5s ease-out;*/
}

@import url('https://fonts.googleapis.com/css?family=Arial');
::-webkit-scrollbar {
  width: 0px !important;
}
.pad {
  padding-top: 8px;
}

.back {
  background-color: #E9ECEF;
  padding-top: 13%;
  padding-bottom: 13%;
}

h1 {
  color: #0000FE;
  font-weight: bold;
  font-size: 30px;
}

.collapse {
  /*-webkit-transition: 0.5s ease-out;*/
}

.collapse p, .collapsing p {
  padding: 10px;
  margin-left: 5px;
  margin-right: 5px;
  border: 1px #FFEEBA solid;
  background-color: #F2DEDE;
  /*-webkit-transition: 0.5s ease-out;*/
}
h3 {
  font-weight: bold;
}
<!DOCTYPE html>
<html>

  <head>
    <title>Company</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <link rel="stylesheet" type="text/css" href="css/bootstrap-lumen.min.css"> -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/custom.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.css">
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
    <script src='https://www.google.com/recaptcha/api.js'></script>

  </head>

  <body>
    <div class="container-fluid">
          <div class="col-md-12">
            <h1>I am an experienced Engineer because</h1>
          </div>
          <div class="col-md-12">
            <label>
						<h3>1) I have an engineering degree
							<span><input type="checkbox" class="check1" data-toggle='collapse' data-target='#collapsediv1' aria-expanded="false" aria-controls="collapsediv1"></span></h3>
						</label>
            <div class="col-md-12 collapse" id="collapsediv1" aria-expanded="false">
              <p>Sorry engineering degree is useles.Please wait for your practilal engineering training</p>
            </div>
          </div>
          <div class="col-md-12">
            <label>
							<h3>2) I have an engineering job
								<span><input type="checkbox" class="check2" data-toggle='collapse' data-target='#collapsediv2' aria-expanded="false" aria-controls="collapsediv2"></span></h3>
							</label>
            <div class="col-md-12 collapse" id="collapsediv2" aria-expanded="false">
              <p>Having jsut an Engineering degree is just not good enough</p>
            </div>
          </div>
      </div>



      <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>



  </body>

</html>

关于html - 如何更改折叠子元素的背景颜色并使其组合在一起？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49675394/

27 4 0
文章推荐： jquery - 悬停交换图像
文章推荐： javascript - javascript中如何释放闭包的内存？
文章推荐： javascript - 光滑的旋转木马不适应响应式图像
文章推荐： javascript - Bootstrap4 对齐 self 基线不起作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com