11540 sujets

JavaScript, DOM et API Web HTML5

Jquery - Masquer/Afficher des éléments

Bonjour à tous,

Je fais une petite application qui permet de masquer/afficher des points sur un carte au clic sur une légende. Au niveau de la légende principale, tout va bien mais quand j'arrive sur la sous-légende après un drag and drop, ça ne marche pas.

Merci pour votre aide.

Voici mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style>


.leg-pole li a{
	background:url(img/sous-vignette-pole.png) top left no-repeat;
}

</style>
<script type="text/javascript" src="js/jquery-1.7.1rc1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.full.min.js"></script>
</head>
<body>
	<menu id="menu">
        <li><span class="drop"></span><span class="legende">Pôles d’enseignement</span><a href="#"><img src="img/vignette-pleine-pole.png" alt="" /></a></li>
        <li><span class="drop"></span><span class="legende">Restaurants Universitaires</span><a href="#"><img src="img/vignette-pleine-restaurant.png" alt="" /></a></li>
        <li><span class="drop"></span><span class="legende">Résidences Universitaires</span><a href="#"><img src="img/vignette-pleine-residence.png" alt="" /></a></li>
        <li><span class="drop"></span><span class="legende">Transports en commun</span><a href="#"><img src="img/vignette-pleine-transport.png" alt="" /></a></li>
    </menu>
            
    <menu class="sous-menu leg-pole">
        <li><a href="#">IUT</a></li>
        <li><a href="#">Polytech Galilée</a></li>
        <li><a href="#">Polytech Vinci</a></li>
        <li><a href="#">UFR Droit, Économie et Gestion</a></li>
        <li><a href="#">UFR Lettres, Langues et Sciences Humaines</a></li>
        <li><a href="#">UFR Sciences</a></li>
        <li><a href="#">UFR Staps</a></li>
        <p><a href="#"><img src="img/fleche-pole.png" />Retour</a></p>
    </menu>
    <script>

$(function(){
		var vignette_pole = $('#menu li:eq(0) img'), cible_pole = $('#menu li:eq(0) span.drop');
		
		//fonctionne
		vignette_pole.bind('click', function(){
			if($('.pole').hasClass('sous-points')){
				if(vignette_pole.attr('src')=='img/vignette-pleine-pole.png'){
					vignette_pole.attr('src','img/vignette-filaire-pole.png');
					$('.pole').css({backgroundColor:'rgba(175,199,0,0)'});
					$('.pole').css({border:'2px solid rgba(175,199,0,1)'});
					$('.leg-pole li a').css({backgroundPosition:'top left'});
				}else{
					vignette_pole.attr('src','img/vignette-pleine-pole.png');
					$('.pole').css({backgroundColor:'rgba(175,199,0,1)'});
					$('.pole').css({border:'2px solid rgba(175,199,0,1)'});
					$('.leg-pole li a').css({backgroundPosition:'bottom left'});
				}
			}else{
				if($(this).attr('src')=='img/vignette-filaire-pole.png'){
					$(this).attr('src','img/vignette-pleine-pole.png');
					$('.pole').css({backgroundColor:'rgba(175,199,0,1)', border:'2px solid rgba(175,199,0,1)'});
				}else{
					$(this).attr('src','img/vignette-filaire-pole.png');
					$('.pole').css({backgroundColor:'rgba(175,199,0,0)', border:'none'});
				}
			}
		});
		
		//ne fonctionne pas
		$('.leg-pole li:first-child a').bind('click', function(){
			if($(this).css('backgroundPosition')=='bottom left'){
				$(this).css({backgroundPosition:'top left'});
			}else{
				$(this).css({backgroundPosition:'bottom left'});
			}
		});
	});

</script>
</body>
</html>

Modifié par Inaes (18 Jun 2013 - 12:39)
Sujet clos
Aller à