Dev Faq
0
votes

jQuery / Comment définir l'élément suivant avec la classe XY et modifier son écran en "true" à l'aide de la fonction de clic?

Je travaille actuellement sur une page wiki et je voudrais obtenir ce qui suit:

J'ai deux divisé enveloppés dans une enveloppe. Le premier sera le conteneur du mot clé et le second sera le conteneur pour la description du mot clé. Par défaut, le second est masqué et doit apparaître une fois que l'utilisateur clique sur le mot-clé. J'ai essayé de configurer du javascript, mais rien ne se passe chaque fois que je clique sur le mot-clé Div. P>

Toute solution à cela? P>

Merci beaucoup à l'avance! P>

P> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html>

<body>

<div class="listWrapper">

  <div class="keyPairWrapper">
    <div class="Keyword">Click me to show my content</div>
    <div class="Content">This is the content for Key1</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Click me to show my content</div>
    <div class="Content">This is the content for Key1</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Click me to show my content</div>
    <div class="Content">This is the content for Key1</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Click me to show my content</div>
    <div class="Content">This is the content for Key1</div>
  </div>

</div>

</body>

</html>

0 commentaires

3 Réponses :

2
votes

Vous voulez modifier le CSS en ( .CSS ("Affichage", "Bloc") code>) ou ( .toggle () code>) Le . Contenu code>, qui est à côté du clic sur . Motorword code> ( $ (ceci) code>):

p> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html>

<body>

<div class="listWrapper">

  <div class="keyPairWrapper">
    <div class="Keyword">Click me to show my content</div>
    <div class="Content">This is the content for Key1</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Click me to show my content</div>
    <div class="Content">This is the content for Key1</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Click me to show my content</div>
    <div class="Content">This is the content for Key1</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Click me to show my content</div>
    <div class="Content">This is the content for Key1</div>
  </div>

</div>

</body>

</html>

4 commentaires

Merci! Une autre question supplémentaire. Y a-t-il un moyen de le faire comme Toggle? Qu'il sera à nouveau caché sur le clic de deuxième souris? Ou avez-vous besoin d'une fonction séparée pour cela?

Vous pouvez utiliser .toggle () pour afficher / masquer. Voir la réponse mise à jour.

Et si l'élément suivant pourrait être n'importe où dans la page, pas nécessairement un frère de soeur?

Vous aurez besoin de les "communiquer" d'une manière ou d'une autre. Il peut s'agir de l'indice relatif de l'autre conteneur, d'un nom de classe partagé de données, de noms partagés, d'attributs, d'ID, etc.

1
votes

Vous pouvez également utiliser basculer (). Montrer si un élément est caché. Cachez si un élément est visible

p> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html>

<body>

<div class="listWrapper">

  <div class="keyPairWrapper">
    <div class="Keyword">Click me to show my content</div>
    <div class="Content">This is the content for Key1</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Click me to show my content</div>
    <div class="Content">This is the content for Key1</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Click me to show my content</div>
    <div class="Content">This is the content for Key1</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Click me to show my content</div>
    <div class="Content">This is the content for Key1</div>
  </div>

</div>

</body>

</html>

0 commentaires
1
votes

Quelques erreurs dans votre JavaScript:

  • Utilisez $ (this) au lieu de $ (". Mot-clé") Pour faire référence à l'élément cliqué, et non tous. Eléments
  • Affichage: true n'est pas valide, vous devez utiliser Affichage: Bloquer
  • .attr ("Affichage: true;") n'est pas valide, vous modifiez CSS, pas des attributs, donc utilisez .cs ("Affichage", "bloc") , ou meilleur .Show () ou .toggle () xxx
0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO