手风琴悬停效果和手风琴 body 与 header 颜色相同

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

嘿，所以改变了一些东西让它按预期工作。

将 background-color 设置为悬停状态，而不是不透明度，这样您就不会影响 child 元素（文本颜色）。我猜你试过了，但没用。这里的主要内容是 !important ，您可以将其放在 css 设置之后以赋予其优先级。我认为 bootstrap 正在应用干扰设置，所以请记住 !important;强制使用 css 属性。

另一件事是我为名为 header-active 的 header 元素添加了一个 css class。 32=]，在更改处于活动状态时锁定更改。

希望您清楚发生了什么变化，这对您有所帮助。

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

手风琴悬停效果和手风琴 body 与 header 颜色相同

accordian hover effect and accordian body same color as header

html

css

accordion

jquery-ui-accordion