Jquery lorsque vous faites défiler vers le bas, change la couleur de fond

Question

J'ai du code HTML, CSS et JQuery. Lorsque je fais glisser vers le bas et vers le haut, je veux changer la couleur de fond de mon "h3" avec jquery comme dans l'image ci-dessous, il devrait être rougeâtre. Par conséquent, lorsque je fais glisser vers le bas, il doit être modifié avec le code jquery.

Mon code de barre latérale à accordéon est :

`

      Notifications29

      Résumé 

      Lorem
      Ipsum

      Publier

      Lorem
      Ipsum

      Engager

      Lorem
      Ipsum

        Écouter

        Lorem
        Ipsum

        Rapport

        Lorem
        Ipsum

`

Mon code CSS de l'accordéon est :

/* Menu à accordéon */

#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;

  }

  /* liens */
  #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;

  }

  /* effet au survol */
  #accordion ul ul li a:hover{
    background-color: #f55661;
  }

  /* cacher les inactifs par défaut */
  #accordion ul ul{
    display:none;
  }

  #accordion li.active ul{
    display:block;
  }

  /* Styles d'icône de police */
  #accordion h3 span{
    font-size:16px;
    padding-right:10px;
  }

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

  h3:hover i{
      color: #fff;
  }

Je dois changer mon code jquery. Le voici :

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

  // faire glisser vers le haut la liste
  $("#accordion ul ul").slideUp("fast");
  //$( "#accordion ul  li h3 ").css('background-color', '#f55661  ');

  // faire glisser vers le bas si c'est fermé
  if(!$(this).next().is(":visible")){
    $(this).next().slideDown("fast")
  }
})

Modifier : J'ai ajouté ce code mais il rend tous les h3 rougeâtres. Je dois en choisir un spécifique, comme la commande "this".

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

Answer 1

Vous pouvez basculer une classe qui applique la couleur de fond en utilisant la .toggleClass() fonction.

De plus, vous devez parcourir toutes les autres listes et supprimer la classe open. Cela peut être fait via siblings().find('h3').removeClass('open'), qui parcourt tous les frères, trouve l'élément h3 et supprime la classe 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");
  }
})

/*Menu accordéon*/

#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;
}

/* liens */

#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;
}

/* effet hover */

#accordion ul ul li a:hover {
  background-color: #f55661;
}

/* masquer les inactifs par défaut */

#accordion ul ul {
  display: none;
}

#accordion li.active ul {
  display: block;
}

/* Styles des icônes de police */

#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;
}

      Notifications29

      Résumé 

        Lorem
        Ipsum

      Publier

        Lorem
        Ipsum

      Engager

        Lorem
        Ipsum

      Écouter

        Lorem
        Ipsum

      Rapport

        Lorem
        Ipsum

Answer 2

Comme mentionné dans la réponse de Spectric, il est probablement idéal de basculer entre les classes, surtout si vous souhaitez appliquer des transitions CSS pour rendre le changement de couleur plus doux.

Cependant, étant donné la trajectoire sur laquelle vous étiez, vous pouvez accomplir ce que vous essayez de faire avec le jQuery suivant :

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

  // Fermer tous les éléments de menu précédemment ouverts
  $("#accordion ul ul").slideUp("fast");
  // Réinitialiser la couleur de tous les h3 en gris foncé
  $('#accordion h3').css('background-color', '#393d42')

  // puis...
  // Pour l'en-tête cliqué, définissez la couleur de fond en rouge
    $(this).css('background-color', '#f55661');
    // et faites glisser son sous-menu afin de l'ouvrir
    $(this).next().slideDown("fast")
})