-1
votes

Afficher et cacher le clic sur plusieurs Div ne fonctionne pas correctement

aide s'il vous plaît, j'ai ce code, mais le bouton Masquer ne fonctionne pas

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="trDest1" class="trDest">
  <!-- Some content here -->
  <button class="expandArrow">Show</button>
</div>
<div id="trDest2_details" class="details">
  <p>show details</p>
  <button class="hideArrow">Hide</button>
</div>

<div id="trDest2" class="trDest">
  <!-- Some content here -->
  <button class="expandArrow">Show</button>
</div>
<div id="trDest2_details" class="details">
  <p>show details</p>
  <button class="hideArrow">Hide</button>
</div>

<div id="trDest3" class="trDest">
  <!-- Some content here -->
  <button class="expandArrow">Show</button>
</div>
<div id="trDest2_details" class="details">
  <p>show details</p>
  <button class="hideArrow">Hide</button>
</div>

javascript jquery html css

0 commentaires

3 Réponses :

0
votes

Utilisez si la déclaration de la ligne de hasClass. Si l'élément a une classe, il renvoie true, vous définissez la variable avec un nom booléen et non de classement

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="trDest1" class="trDest">
    <!-- Some content here -->
    <button class="expandArrow">Show</button>
</div>
<div id="trDest2_details" class="details">
    <p>show details</p>
    <button class="hideArrow">Hide</button>    
</div>

<div id="trDest2" class="trDest">
    <!-- Some content here -->
    <button class="expandArrow">Show</button>
</div>
<div id="trDest2_details" class="details">
    <p>show details</p>
    <button class="hideArrow">Hide</button>
</div>

<div id="trDest3" class="trDest">
    <!-- Some content here -->
    <button class="expandArrow">Show</button>
</div>
<div id="trDest2_details" class="details">
    <p>show details</p>
    <button class="hideArrow">Hide</button>
</div>

2 commentaires

Bonjour, ne fonctionne pas, ne se cache pas lorsque vous appuyez sur le bouton de masque

Votre code n'a pas fonctionné correctement qu'il bascule sur Afficher le bouton clic cliquez sur rien ne se passe lorsque vous cliquez sur le bouton Masquer


                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     Il y a deux problèmes dans votre code ... 
 Premier problème réside dans votre structure HTML ou votre JS.  H2> $('.expandArrow, .hideArrow').on('click', function () {
    $(this).closest('.trDest').toggleClass('visible-description', $(this).hasClass('hideArrow'));
});

                                

                                                                    
                                    
                                    
                                        0 commentaires
                                        
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     Vous pouvez essayer ci-dessous le code - 
  p> 


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="trDest1" class="trDest">
  <!-- Some content here -->
  <button class="expandArrow">Show</button>
</div>
<div id="trDest2_details" class="details">
  <p>show details</p>
  <button class="hideArrow">Hide</button>
</div>

<div id="trDest2" class="trDest">
  <!-- Some content here -->
  <button class="expandArrow">Show</button>
</div>
<div id="trDest2_details" class="details">
  <p>show details</p>
  <button class="hideArrow">Hide</button>
</div>

<div id="trDest3" class="trDest">
  <!-- Some content here -->
  <button class="expandArrow">Show</button>
</div>
<div id="trDest2_details" class="details">
  <p>show details</p>
  <button class="hideArrow">Hide</button>
</div>

                                

                                                                    
                                    
                                    
                                        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

Afficher et cacher le clic sur plusieurs Div ne fonctionne pas correctement

Premier problème réside dans votre structure HTML ou votre JS. H2> $('.expandArrow, .hideArrow').on('click', function () { $(this).closest('.trDest').toggleClass('visible-description', $(this).hasClass('hideArrow')); });

Premier problème réside dans votre structure HTML ou votre JS. H2>
$('.expandArrow, .hideArrow').on('click', function () { $(this).closest('.trDest').toggleClass('visible-description', $(this).hasClass('hideArrow')); });