J'ai cherché un moyen d'afficher un contenu DIV après avoir cliqué sur une image. J'ai trouvé une solution sur JSFiddle ici.

Maintenant j'essaye de le faire fonctionner pour 3 DIVs. Voilà comment je l'ai fait:

<script>
	$("#lol_team").hide();
	$("a").on("click", function(e){
		e.preventDefault();
	$("#lol_team").toggle();
});
</script>
<script>
	$("#csgo_team").hide();
	$("a").on("click", function(e){
		e.preventDefault();
	$("#csgo_team").toggle();
});
</script>
<script>
	$("#cod_team").hide();
	$("a").on("click", function(e){
		e.preventDefault();
	$("#cod_team").toggle();
});
</script>
<!-- first team -->

<a href="#"><img src="./img/team_csgo.png" alt="Counter Strike Global Offensive"/></a>	<div id="csgo_team">
  <h2>CS:GO Team Lineup:</h2>
</div>

<!-- second team -->

<a href="#"><img src="./img/team_lol.png" alt="League of Legends"/></a>
<div id="lol_team">
  <h2>Leage of Legends Team Lineup:</h2>
</div>

<!-- thrid team -->

<a href="#"><img src="./img/team_cod.png" alt="Call of Duty"/></a>
<div id="cod_team">
  <h2>Call of Duty Team Lineup:</h2>
</div>

Lorsque je clique sur le premier / deuxième / troisième div, tous s'ouvriront / se fermeront. Que dois-je changer pour qu'ils s'ouvrent / se ferment un par un?.

0
Kalim 7 août 2016 à 23:09

3 réponses

Meilleure réponse

L'appel de $("a").on("click") associera l'événement click à tous les <a> de la page. Vous ne voulez qu'une seule ancre pour effectuer une div, vous devez donc attacher des ID à chacun d'eux et ajouter l'événement pour les basculer ensuite. Voir le code mis à jour suivant:

$("#lol_team").hide();
$("#lol_team_anchor").on("click", function(e){
  e.preventDefault();
  $("#lol_team").toggle();
});
$("#csgo_team").hide();
$("#csgo_team_anchor").on("click", function(e){
  e.preventDefault();
	$("#csgo_team").toggle();
});
$("#cod_team").hide();
$("#cod_team_anchor").on("click", function(e){
  e.preventDefault();
	$("#cod_team").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- first team -->

<a href="#" id="csgo_team_anchor"><img src="./img/team_csgo.png" alt="Counter Strike Global Offensive"/></a>	<div id="csgo_team">
  <h2>CS:GO Team Lineup:</h2>
</div>

<!-- second team -->

<a href="#" id="lol_team_anchor"><img src="./img/team_lol.png" alt="League of Legends"/></a>
<div id="lol_team">
  <h2>Leage of Legends Team Lineup:</h2>
</div>

<!-- thrid team -->

<a href="#" id="cod_team_anchor"><img src="./img/team_cod.png" alt="Call of Duty"/></a>
<div id="cod_team">
  <h2>Call of Duty Team Lineup:</h2>
</div>

Idéalement cependant, vous pouvez simplifier cela à quelque chose comme ci-dessous:

//Hide all divs with class of 'toggleContainer' by default:
$('div.toggleContainer').hide();

//Attach a click event to all anchors with class of 'toggle'
$('a.toggle').on('click', function(e) {
  //Ignore the click (Prevent it from trying to load whatever is in 'href'. If it's '#' (This will prevent the page from going to the top)
  e.preventDefault();
  //Get the associated toggle container for this anchor
  $(this).next('div.toggleContainer').toggle();
});
//Hide all toggleContainers by default:
$('div.toggleContainer').hide();

$('a.toggle').on('click', function(e) {
  e.preventDefault();
  //Get the associated toggle container for this anchor
  $(this).next('div.toggleContainer').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- first team -->

<a href="#" class="toggle"><img src="./img/team_csgo.png" alt="Counter Strike Global Offensive"/></a>
<div class="toggleContainer">
  <h2>CS:GO Team Lineup:</h2>
</div>

<!-- second team -->

<a href="#" class="toggle"><img src="./img/team_lol.png" alt="League of Legends"/></a>
<div class="toggleContainer">
  <h2>Leage of Legends Team Lineup:</h2>
</div>

<!-- thrid team -->

<a href="#" class="toggle"><img src="./img/team_cod.png" alt="Call of Duty"/></a>
<div class="toggleContainer">
  <h2>Call of Duty Team Lineup:</h2>
</div>
0
Goodbye StackExchange 7 août 2016 à 20:21

Tout ce que j'ai fait ici est d'ajouter un data-target attribut à chaque <a> avec une valeur comme ID du div correspondant et de l'utiliser pour toggle le div. C'est si simple

J'ai également remplacé le href="#" par href="javascript:;" pour éviter que la page défile en haut.

$('a').click(function(){
  $($(this).attr('data-target')).toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- first team -->

<a href="javascript:;" data-target="#csgo_team">
    <img src="./img/team_csgo.png" alt="Counter Strike Global Offensive"/>
</a>	
<div id="csgo_team">
  <h2>CS:GO Team Lineup:</h2>
</div>
<br>
<!-- second team -->
<a href="javascript:;" data-target="#lol_team">
  <img src="./img/team_lol.png" alt="League of Legends"/>
</a>
<div id="lol_team">
  <h2>Leage of Legends Team Lineup:</h2>
</div>
<br>
<!-- thrid team -->

<a href="javascript:;" data-target="#cod_team">
  <img src="./img/team_cod.png" alt="Call of Duty"/>
</a>
<div id="cod_team">
  <h2>Call of Duty Team Lineup:</h2>
</div>
0
jonju 7 août 2016 à 20:25

Donnez les identifiants des <a> balises de sorte que lorsque vous ajoutez l'événement click, il n'accroche qu'une seule ancre.

Sinon le clic va sur chaque ancre de la page

0
bresleveloper 7 août 2016 à 20:14