La bascule de glissière ne s'activera pas sur la classe

Question

J'ai regardé beaucoup de questions sur ce sujet et il y a des réponses similaires qui devraient fonctionner, mais cela ne fonctionne pas pour moi. J'admets que DOM traversal n'est pas mon point fort, donc si vous avez une solution et que vous pouvez donner un peu de contexte, cela m'aiderait vraiment à comprendre pourquoi les autres solutions ne fonctionnaient pas.

J'ai un div avec un bouton et sur un clic de bouton (ce bouton apparaît seulement sur mobile) il devrait glisser vers le bas seulement le contenu div actuel. Je peux obtenir cela au travail, mais le problème est qu'il ouvre tout le contenu divs. Je ne peux cependant pas l'obtenir pour ouvrir la carte spécifique même en utilisant des solutions telles que $ (this), $ (next), $ (prev) ou $ (find).

Le code que je poste ci-dessous ne l'ouvre pas du tout, et j'utilise cette version du code car elle ressemble beaucoup aux réponses sur Stack Overflow.

$(document).ready(function(){ 
 
\t 
 
\t $('.mobile-icon').on('click', function(){ 
 
\t \t event.preventDefault(); 
 
\t \t $(this).next().find('.card-bottom').slideToggle(); 
 
\t \t console.log('hi there'); //this does print 
 

 
\t }); 
 

 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
    <!-- FIRST CARD --> 
 
    <div class="card"> 
 
     <div class="card-top"> 
 
\t  <h1 class="card-title">Headline</h1> 
 
\t \t <a href="#" class="mobile-icon"> <span class="glyphicon glyphicon-plus"></span> </a> 
 
\t \t <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p> 
 
\t </div> 
 
\t <!-- END CARD-TOP --> 
 
\t \t \t \t 
 
     <div class="card-bottom"> 
 
\t  <p>Content to be toggled</p> 
 
\t </div> 
 
     <!-- END CARD BOTTOM --> 
 
    </div> 
 
    <!-- END CARD --> 
 

 
    <!-- SECOND CARD --> 
 
    <div class="card"> 
 
     <div class="card-top"> 
 
\t  <h1 class="card-title">Headline</h1> 
 
\t \t <a href="#" class="mobile-icon"> <span class="glyphicon glyphicon-plus"></span> </a> 
 
\t \t <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p> 
 
\t </div> 
 
\t <!-- END CARD-TOP --> 
 
\t \t \t \t 
 
     <div class="card-bottom"> 
 
\t  <p>Content to be toggled</p> 
 
\t </div> 
 
     <!-- END CARD BOTTOM --> 
 
    </div> 
 
    <!-- END CARD -->

Answer 1

La question principale est de savoir comment vous utilisez .next() et .find() de jQuery. Depuis $(this) est le <a> tag, .next(), qui sélectionne le frère suivant, est le <p> tag. Ensuite, appeler .find() sur le <p> tag vérifierait tous ses descendants, pour lesquels il n'y en a aucun.

Vous devez donc sélectionner le parent des divs 'card-top' et 'card-bottom' avant de parcourir .find().

Par exemple:

$(document).ready(function(){ 
    $('.mobile-icon').on('click', function(event){ 
     event.preventDefault(); 
     $(this).parent().parent().find('.card-bottom').slideToggle(); 
    }); 
}); 

Le premier appel à .parent() sera le parent de l'étiquette <a>, qui est le 'card-top' div et le .parent() de qui sera le 'card' div. Ensuite, appelez .find() fonctionnera.

http://www.bootply.com/UMwXaOILHv

Answer 2

1. manquant la fermeture " sur class="card>

2. Ajouter event-function() il est function(event)

3. Si vous n'avez pas besoin de lier n'importe où utiliser un div au lieu d'un a tag et vous n'aurez pas besoin de .

$('.mobile-icon').on('click', function(event) { 
 
    event.preventDefault(); 
 
    $(this).closest('.card').find('.card-bottom').slideToggle(); 
 
    // .closest finds the nearest .card ancestor (it goes up) 
 
    // .find then finds .card-bottom within the closest .card 
 
});

.mobile-icon { 
 
    background-color: black; 
 
    width: 100px; height: 40px; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- FIRST CARD --> 
 
<div class="card"> 
 
    <div class="card-top"> 
 
    <h1 class="card-title">Headline</h1> 
 
    <div class="mobile-icon">click me</div> 
 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p> 
 
</div> 
 
<!-- END CARD-TOP --> 
 
    <div class="card-bottom"> 
 
    <p>Content to be toggled</p> 
 
    </div> 
 
    <!-- END CARD BOTTOM --> 
 
</div> 
 
<!-- END CARD --> 
 

 
<!-- SECOND CARD --> 
 
<div class="card"> 
 
    <div class="card-top"> 
 
    <h1 class="card-title">Headline</h1> 
 
    <a href="#" class="mobile-icon">click me</a> 
 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p> 
 
</div> 
 
<!-- END CARD-TOP --> 
 
    <div class="card-bottom"> 
 
    <p>Content to be toggled</p> 
 
    </div> 
 
    <!-- END CARD BOTTOM --> 
 
</div> 
 
<!-- END CARD -->

violon

https://jsfiddle.net/Hastig/m2zaLfnz/