Question

我有一些 HTML、CSS 和 JQuery 代码。当我向下和向上滑动时，我想使用 jquery 更改我的“h3”背景颜色，如下图所示，它应该是微红色的。结果我滑下来的时候，必须用jquery代码改一下。

我的手风琴侧边栏代码是：

minify

我的手风琴 CSS 代码是：

`<div id="accordion">
  <ul>
    <li class="active">
      <h3><span class="icon-dashboard"><i class="far fa-bell"></i></span>Notifications<span class="notification-span">29</span></h3>
    </li>
    <li >
      <h3 class="tooltip"><span class="icon-coffee"><i class="fab fa-slideshare"></i></span>Summary </h3>
    <ul class">
      <li class="accordion-li"><a href="#">Lorem</a></li>
      <li class="accordion-li"><a href="#">Ipsum</a></li>
    </ul>
      </li>

    <li>
      <h3><span class="icon-cloud"><i class="fas fa-edit"></i></span>Publish</h3>
    <ul>
      <li class="accordion-li"><a href="#">Lorem</a></li>
      <li class="accordion-li"><a href="#">Ipsum</a></li>
      
    </ul>
    </li>

 <li>
      <h3><span class="icon-cloud"><i class="far fa-comments"></i></span>Engage</h3>
    <ul>
      <li class="accordion-li"><a href="#">Lorem</a></li>
      <li class="accordion-li"><a href="#">Ipsum</a></li>
    </ul>
    </li>

    <li>
        <h3><span class="icon-cloud"><i class="fas fa-volume-up"></i></span>Listen</h3>
      <ul>
        <li class="accordion-li"><a href="#">Lorem</a></li>
        <li class="accordion-li"><a href="#">Ipsum</a></li>
      </ul>
      </li>

      <li>
        <h3><span class="icon-cloud"><i class="fas fa-chart-line"></i></span>Report</h3>
      <ul>
        <li class="accordion-li"><a href="#">Lorem</a></li>
        <li class="accordion-li"><a href="#">Ipsum</a></li>
        
      </ul>
      </li>


  </ul>
</div>`

我必须更改我的 jquery 代码。我们在这里：

/*Accordion Menu*/

#accordion {
    width: 100%;
    background-color: #393d42;
    color:#fff;
}

#accordion h3{
    text-transform: uppercase;
    font-size:12px;
    line-height:34px;
    padding:10px 10px;
    cursor:pointer;
  }

  #accordion h3:hover{
      background-color: #f55661;
  }

  #accordion h3:link{
    background-color:red;

  }
 

  /* links */
  #accordion ul ul li a{
    color:white;
    display:block;
    font-size:11px;
    line-height:27px;
    padding: 0 15px;
    text-decoration:none;
    transition: all .1s;
    background-color: #32363a;
    
  }
  
  /* hover effect */
  #accordion ul ul li a:hover{
    background-color: #f55661;
  }


  /* hide non-actives by default */
  #accordion ul ul{
    display:none;
  }
  
  #accordion li.active ul{
    display:block;
  }

  
  /* Icon font styles */
  #accordion h3 span{
    font-size:16px;
    padding-right:10px;
  }

  i{
      font-weight: 100;
     color:#f55661;
  }

  h3:hover i{
      color: #fff;
  }

编辑：我添加了此代码，但它使所有 h3 都变红了。我必须选择特定的一个，比如“这个”命令。

    $("#accordion h3").click(function(){

  // slide up the list
  $("#accordion ul ul").slideUp("fast");
  //$( "#accordion ul  li h3 ").css('background-color', '#f55661  ');


  // slide down if it is closed
  if(!$(this).next().is(":visible")){
    $(this).next().slideDown("fast")
  }
})

Answer 1

您可以使用 .toggleClass() 函数切换应用背景颜色的类。

此外，您必须遍历所有其他列表并删除 flutter 类。这可以通过 flutter 完成，它循环遍历所有兄弟元素，找到 open 元素并删除 siblings().find('h3').removeClass('open') 类。

h3

open

$("#accordion h3").click(function() {
  $(this).toggleClass('open');
  $(this).parent().siblings().find('h3').removeClass('open');
  $("#accordion ul ul").slideUp("fast");
  if (!$(this).next().is(":visible")) {
    $(this).next().slideDown("fast");
  }
})

Answer 2

正如 Spectric 的回答中提到的，切换类可能是理想的，特别是如果您想应用 CSS 过渡以使颜色变化更平滑。

但是，鉴于您所处的轨迹，您可以使用以下 jQuery 完成您想要执行的操作：

$("#accordion h3").click(function(){

  // Close all previously-opened menu items
  $("#accordion ul ul").slideUp("fast");
  // Reset color of all h3s to dark gray
  $('#accordion h3').css('background-color', '#393d42')

  // then...
  // For the clicked header, set red bg color
    $(this).css('background-color', '#f55661');
    // and slide it's sub menu open
    $(this).next().slideDown("fast")
})

向下滑动时的jQuery，更改背景颜色

2 个答案: