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

Question

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

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

`<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>`

我的手风琴 CSS 代码是：

/*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;
  }

我必须更改我的 jquery 代码。 我们到了 ：

    $("#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")
  }
})

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

   $("#accordion ul li h3").css('background-color', '#f55661  ');

Answer 1

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

此外，您必须遍历所有其他列表并删除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"); } })

 /*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; } .tooltip.open { background-color: #f55661; } /* 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; } .open { background-color: #f55661; } .open i{ color:white; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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> <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>

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")
})