J'ai essayé de trouver une solution à ce que je veux faire mais rien ne correspond exactement. La chose la plus proche que j'ai trouvée est un accordéon à onglets. Pour être précis, j'ai un menu horizontal composé de liens qui, lorsque vous cliquez dessus, affichera du contenu supplémentaire sous la ligne de liens avec une belle animation de défilement vers le bas, et glisse vers le haut lorsque le même lien est cliqué (le reste du contenu de la page se déplace lorsque le le contenu caché est révélé, c'est ce que je veux).
Le problème est que lorsque d'autres liens sont cliqués, ils affichent également du contenu supplémentaire, mais le contenu d'un clic antérieur est toujours visible. Je veux que le contenu précédent glisse vers le haut avant que le nouveau contenu ne glisse vers le bas. Est-ce possible, et si c'est le cas, comment dois-je procéder?
Voici le code que j'ai:
$(document).ready(function() {
// hides the menu as soon as the DOM is ready
$('#about').hide();
$('#search').hide();
$('#pages').hide();
$('#links').hide();
// toggles the menu on clicking the noted link
$('#toggleabout').click(function() {
$('#about').slideToggle(400);
return false;
});
$('#togglesearch').click(function() {
$('#search').slideToggle(400);
return false;
});
$('#togglepages').click(function() {
$('#pages').slideToggle(400);
return false;
});
$('#togglelinks').click(function() {
$('#links').slideToggle(400);
return false;
});
});
3 réponses
Cela devrait être un simple appel à
$(".your-element-class").slideUp();
Pour fermer tous les éléments avant d'appeler slideDown sur le suivant. Si toutefois vous rencontrez plus de problèmes, veuillez publier du code et / ou améliorer votre description du problème que vous rencontrez spécifiquement.
Essayez quelque chose comme, je ne sais pas comment vous identifiez vos sous-menus mais je choisis juste l'ID du A et je mets un -navcontent
après l'ID du sous-menu:
$("#mynav li a").click(function(e){
e.preventDefault(); // Prevent jumping to top of page
$("[id$='-navcontent']").slideUp(); // Slide up all other -navcontent elements
$("#" + $(this).attr("id") + "-navcontent").slideToggle(); // Slidedown the current -navcontent element
});
Pour plus d'informations sur le $=
, cliquez ici: http://api.jquery.com/ catégorie / sélecteurs /
$(document).ready(function() {
// hides the menu as soon as the DOM is ready
$('#about, #search, #pages, #links').hide();
// toggles the menu on clicking the noted link
$("#mynav input:button").click(function(e){
e.preventDefault(); // Prevent jumping to top of page
var id = $(this).attr("id").replace("toggle", "");
$("#mynav input:button").each(function(){ // Slide up all elements which are visible
var innerID = $(this).attr("id").replace("toggle", "");
if(id == innerID) return; // Prevent current item to slideUp and slideDown directly after eachother, if is currentItem, only hide.
$("#" + innerID).slideUp();
});
$("#" + id).slideToggle(); // Slidedown the current -navcontent element
});
});
Démo en direct: http://jsfiddle.net/Lcx88/2/
Vous pouvez placer vos autres liens coulissants dans un tableau. Désormais, lorsqu'un utilisateur clique sur un lien, vérifiez votre tableau pour vous assurer que les autres liens sont réduits.
Questions connexes
De nouvelles questions
javascript
Pour des questions concernant la programmation dans ECMAScript (JavaScript / JS) et ses divers dialectes / implémentations (hors ActionScript). Veuillez inclure toutes les balises pertinentes dans votre question; par exemple, [node.js], [jquery], [json], etc.