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;
    });
});
0
Sovereign Anarchei 28 nov. 2011 à 12:00

3 réponses

Meilleure réponse

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.

0
Godwin 28 nov. 2011 à 08:05

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/

0
Niels 28 nov. 2011 à 10:51

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.

0
Thomas Tschernich 28 nov. 2011 à 08:05