javascript - 向下滑动时的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 变红。我必须选择特定的，例如“this”命令。

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

标签： javascripthtmljquerycss

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>