Le bouton à bascule pour développer/réduire les divs
J'ai deux divs uns à côté des autres et que vous souhaitez utiliser la fonction de bascule pour réduire d'un div (barre latérale), horizontalement, tout en élargissant l'autre (Carte) de prendre toute la largeur de l'ancien. J'aurais alors besoin de la passer à ramener les deux divs à leur origine largeurs/positions. Je peux le faire pour faire la première opération, mais je n'ai aucune idée sur comment faire l'inverse. Voir Violon:
$(document).ready(function(){
$("#toggle").click(function(){
$("#sidebar").animate({width: 'toggle'});
$("#map").animate({width: '100%'});
});
});
OriginalL'auteur user3716388 | 2014-06-13
Vous devez vous connecter pour publier un commentaire.
Essayer cette
HTML
Script
DÉMO
Merci 🙂
Je veux juste souligner ce qui ne fonctionne pas correctement. Vous pouvez voir que la barre latérale est visible sous la carte lorsque les animations commencer (quand il est de retour dans).
OriginalL'auteur Sridhar R
Vous avez juste besoin de vérifier si la div est
100%
ou80%
.Travail De Violon
où et quand la barre latérale est d'obtenir poussé sous la carte? le navigateur de test sur?
À l'aide de Chrome (à jour), vous pouvez le voir en regardant juste la barre de défilement en cliquant sur le bouton. Vous verrez, il sera de plus en plus grands et ensuite revenir à la normale. Même avec IE, tho vous a été à l'aide de jQuery 1.10.1 et IE n'a pas l'air d'aimer cela et ne travaillent pas du tout.
Ce code fonctionne bien avec ce que je suis en train de travailler sur.
ouais je ne l'ai toujours pas fait ce que Ruddy est en train de parler.
OriginalL'auteur Mr_Green
J'ai l'habitude d'utiliser une deuxième classe css qui indique l'état actuel de la div. Quelque chose comme
collapsed
qui est modifié ou retiré lorsque la div se développe, de sorte que vous pouvez vérifier pour cette deuxième classe afin de déterminer quelle est l'action que l'utilisateur demande.Violon édité: http://jsfiddle.net/8wKxY/6/
Quelque chose comme ceci:
Dans l'exemple, j'ai joint la classe de contrôle directement sur le bouton, mais il serait plus approprié de le rattacher à une commune conteneur des deux extensible divs.
Notez également que vous avez probablement besoin d'avoir un
owerflow: hidden
bien sur la barre latérale de sorte qu'il ne passe sous la carte en train de s'effondrer. Dans mon exemple, j'ai complètement masquer la barre latérale une fois l'animation terminée.La barre latérale un peu poussé sous la carte... cela ne fonctionne pas.
Probablement, vous avez juste besoin d'ajuster les largeurs de
Son votre réponse, il doit être corrigé.
Je pense que nous devrions avant tout du point de directions et d'aider d'autres utilisateurs à comprendre des concepts plutôt que de les copier-coller quelque chose, ils ne comprendront pas. Je crois que la théorie derrière ma réponse est correcte, même si le violon, le résultat n'est pas parfait à 100%. Je me permets de le corriger, mais je ne pense pas, il est donc important à ce stade.
OriginalL'auteur Mir
Utiliser jQuery toggleClass()
Travail De Démonstration
OriginalL'auteur Shaunak D