Bas de page SlideToggle w Plus/Moins ToggleClass

J'ai un pied de page, dans la vue de bureau, il y a 5 colonnes avec des liens dans les colonnes 1-4.Bas de page SlideToggle w Plus/Moins ToggleClass

En vue mobile, la première colonne 4 devient comme un accordéon. Lorsque vous cliquez sur le h3, le ul glisse vers le bas.

Je l'ai eu pour que dans la vue mobile, la classe + est ajoutée à chaque h3. Lorsque cliqué, il bascule vers le -. Cependant, je n'arrive pas à revenir au + quand ils cliquent sur un h3 différent. Cela ne fonctionne que si l'utilisateur clique sur le même h3 qui est déjà ouvert, puis il retourne à la classe +.

Voici mon jQuery

jQuery(".footer-blocks > div:not(:last-child) h3").append("<span class='slide-toggle-close float-right transition-all'></span>"); 

// accordion for footer block links 
jQuery(".footer-blocks > div:not(:last-child) h3").click(function(){ 
    jQuery(this).find(".slide-toggle-close").toggleClass("slide-toggle-open"); 
    jQuery(this).next("ul").slideToggle(); 
    jQuery(this).parent().siblings().not(".block-column-5").children().next().slideUp(); 
    return false; 
});

Et voici mon html

<div class="footer-blocks transition-all"> 
<div class="block-column-1 transition-all"><h3>Equipment</h3> 
    <ul> 
     <li><a href="#" target="_blank">Download Catalog (PDF)</a></li> 
     <li><a href="#">Request Print Catalog</a></li> 
     <li><a href="#">Rental Equipments</a></li> 
     <li><a href="#">New &amp; Used Equipments</a></li> 
     <li><a href="#">Equipment Parts</a></li> 
     <li><a href="#">Credit Application</a></li> 
     <li><a href="#">Financing</a></li> 
    </ul> 
</div> 
<div class="block-column-2 transition-all"><h3>Support</h3> 
    <ul> 
     <li><a href="#">Customer Support</a></li> 
     <li><a href="#">Service &amp; Maintenance</a></li> 
     <li><a href="#">Safety Training</a></li> 
    </ul> 
</div> 
<div class="block-column-3 transition-all"><h3>Company</h3> 
    <ul> 
     <li><a href="#">About Ahern</a></li> 
     <li><a href="#">Company History</a></li> 
     <li><a href="#">Careers</a></li> 
     <li><a href="#">News</a></li> 
     <li><a href="#">Investor Relations</a></li> 
    </ul> 
</div> 
<div class="block-column-4 transition-all"><h3>Contact</h3> 
    <ul> 
     <li><i class="fa fa-envelope"></i> <a href="#">Email Us</a></li> 
     <li><i class="fa fa-comments-o"></i> <a href="#">Live Chat</a></li> 
     <li><i class="fa fa-phone"></i> <a href="#">Call Me</a></li> 
     <li><i class="fa fa-map-marker"></i> <a href="#">Find a Location</a></li> 
     <li><i class="fa fa-wrench"></i> <a href="#">Schedule a Service</a></li> 
    </ul> 
</div>

https://jsfiddle.net/xxaimsxx/8dL5ufm8/

Source

2016-09-16 Amy Ling

Pouvez-vous créer un extrait de violon ou un code? –

Merci Darren !! Ça a marché! Je savais que ça devait être simple mais je ne pouvais pas le comprendre. Je n'écris pas beaucoup js/jquery non plus. –

Cela échoue ... en regardant maintenant - cliquez deux fois sur le même élément et vous verrez ce que je veux dire –

manière un peu plus simple que votre réponse - vous n'avez pas besoin du sélecteur children() que vous cherchez déjà en eux avec le find():

jQuery(".footer-blocks > div:not(:last-child) h3").click(function(){ 
     jQuery(this).parent().siblings().find(".slide-toggle-close").removeClass("slide-toggle-open"); 
     jQuery(this).find(".slide-toggle-close").toggleClass("slide-toggle-open"); 
     jQuery(this).next("ul").slideToggle(); 
     jQuery(this).parent().siblings().not(".block-column-5").children().next().slideUp(); 
     return false; 
    });

Source

2016-09-16 21:41:53

Avec l'aide du code de Darren, a ajouté ceci et cela a fonctionné:

jQuery(this).parent().siblings().children().find(".slide-toggle-close").removeClass("slide-toggle-open"); // have to get rid of all +

JSFiddle a été mis à jour.

Source

2016-09-16 21:39:50

Ajouté une réponse un peu plus simple –

Bas de page SlideToggle w Plus/Moins ToggleClass

Répondre

Questions connexes