手风琴悬停效果和手风琴主体颜色与标题相同

Question

我正在制作一个可折叠的手风琴，发现有两件事我想改变。我关注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, consectetur adipisicing elit, 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, consectetur adipisicing elit, sed do eiusmod
               tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
               tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
            </p>
        </div>
    </div> <!-- research-group -->
    
  </div> <!-- sec -->

我已经在codepen上写了代码

Answer 1

嘿，所以更改了一些东西以使其按预期工作。

在悬停时设置背景颜色，而不是不透明度，这样您就不会影响子元素（文本颜色）。我猜你试过了，但它不起作用。这里的主要内容是 !important ，您可以将其放在 css 设置之后以赋予其优先级。我认为引导程序正在应用干扰的设置，所以请记住！important;强制css属性。

另一件事是我为标题元素添加了一个名为 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, consectetur adipisicing elit, 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, consectetur adipisicing elit, sed do eiusmod
               tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
               tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
            </p>
        </div>
    </div> <!-- research-group -->
    
  </div> <!-- sec -->