Reset background image CSS

Question

Je suis en train de créer un menu de type accordéon en utilisant la JQUERY suivante:

function initMenu() { 
    $('#menu ul').hide(); 
     $('#menu li a').click(
      function() { 
       $(this).next().slideToggle('normal'); 
       $(this).css("background", "url(customnav_selected.png) top right"); 
      } 
     ); 
} 
$(document).ready(function() {initMenu();}); 

Cela fonctionne à un point, quand je clique sur le lien de menu, il se développe et les changements de fond d'en-tête de menu.

Cependant, je veux qu'il revienne lorsque je clique dessus une seconde fois pour réduire le menu.

Quelqu'un peut-il aider?

Answer 1

Au lieu de cela:

$(this).css("background", "url(customnav_selected.png) top right"); 

Mettez ce style dans une classe CSS, et utiliser toggleClass au lieu de css, par exemple:

$(this).toggleClass("selected"); //assuming a class of .selected 

de sorte que le gestionnaire de clic devient:

$('#menu li a').click(function() { 
    $(this).next().slideToggle('normal'); 
    $(this).toggleClass("selected"); 
}); 

et le style:

<style> 
.selected {background: url(customnav_selected.png) top right} 
</style> 

Answer 2

Définir l'image d'arrière-plan sur none (ou sur la valeur initiale).

Je trouve plus facile de définir directement des classes sur des éléments html spécifiques que des propriétés css, puis d'ajouter/supprimer ces classes.

Answer 3

La définition du style d'arrière-plan sur une chaîne vide doit rétablir le style hérité de la feuille de style. Cela suppose que le style par défaut provient d'une feuille de style, si ce n'est pas le cas, vous devrez le réinitialiser manuellement.