平顶悬停效果与手风琴本体同色标头

Question

我当时正在做一个可折叠手风琴，发现了两件我想要改变的东西。我在跟踪本网站。我不能做其中的一些事情。就像悬停一样不一样，第二，打开后颜色是不同的。请看一看，并帮助我解决它的。

​

  $(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 -->

​

我在码页上写了这段代码

Answer 1

嘿，所以换了几样东西让它像预期的那样工作。

设置背景颜色悬停，而不是不透明，这样您就不会影响子元素(文本颜色)。我猜你试过了，但没用。这里的主要优点是！重要的是，您可以在css设置之后设置它的优先级。我认为引导程序应用的设置是干扰的，所以请记住！重要的是，强制使用css属性。

另一件事是，我为标题元素添加了一个css类，名为header-active..用和身体相似的方式，在身体活动的时候锁定变化。

希望你能清楚地知道是什么改变了，这是有帮助的。

​

  $(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 -->

​