J'ai un problème avec une barre latérale à l'aide jQuery basculement
-
22-08-2019 - |
Question
Je suis en train de créer une barre latérale simple en utilisant jquery basculement, où il dilate et se contracte quand un bouton est pressé. Le bouton change également à un autre type de bouton lorsqu'il est pressé. La barre latérale se développera, mais pour une raison quelconque, il ne bougera pas revenir à sa position d'origine. Vous pouvez voir une copie du javascript et html http: //www.jqueryhelp .com / viewtopic.php? p = 4241 # 4241
Voici le code de travail, grâce Bendeway! : D
$(".btn-slide").live('click', function(e){
e.preventDefault();
$("#sidebar").animate({opacity: "show", left: 250}, "slow");
$(this).toggleClass("btn-slide").toggleClass("active");
});
$(".active").live('click', function(e){
e.preventDefault();
$("#sidebar").animate({opacity: "hide", left: 100}, "slow");
$(this).toggleClass("btn-slide").toggleClass("active");
});
La solution
essayer au lieu d'utiliser à droite à gauche avec un nombre négatif. En outre, je vous conseille d'utiliser preventDefault au lieu de retourner faux.
$(".active").click(function(e){
e.preventDefault();
$("#sidebar").animate({opacity: "hide", left: -250}, "slow");
$(this).toggleClass("btn-slide");
});
Mise à jour
Un autre morceau que je viens de remarquer est que votre événement la fixation d'un clic sur le bouton .active, lorsque le document est prêt, mais il n'y a pas de bouton .active lorsque le document est prêt qui vient après vous le changiez. Il y a quelques options ici.
La première est d'utiliser la nouvelle vivre caractéristique de jquery 1.3
$(".btn-slide").live('click', function(e){
e.preventDefault();
$("#sidebar").animate({opacity: "hide", left: 250}, "slow");
$(this).toggleClass("btn-slide").toggleClass("active");
});
$(".active").live('click', function(e){
e.preventDefault();
$("#sidebar").animate({opacity: "hide", left: -250}, "slow");
$(this).toggleClass("btn-slide").toggleClass("active");
});
L'autre option serait d'avoir mis l'événement cliquez sur un modificateur différent (par exemple. Sur l'id, peut-être).
<span>News <img src="img/overlay.png" id="sliderButton" class="btn-slide" alt="" /></span>
puis utilisez cette fonction pour gérer le clic
$("#sliderButton").click(function(e){
e.preventDefault();
$(this).is('.btn-slide').each(function() {
$("#sidebar").animate({opacity: "show", left: 250}, "slow");
});
$(this).is('.active').each(function() {
$("#sidebar").animate({opacity: "hide", left: -250}, "slow");
});
$(this).toggleClass("active").toggleClass('btn-slide');
});
ou encore plus concise
$("#sliderButton").click(function(e){
e.preventDefault();
var animationSettings = {opacity: "show", left: 250};
if ($(this).hasClass('active') )
{
animationSettings = {opacity: "hide", left: -250};
}
$("#sidebar").animate(animationSettings , "slow");
$(this).toggleClass("active").toggleClass('btn-slide');
});
La dernière option que je peux penser serait de définir les événements de clic après que vous les changer, mais je ne ferais pas ça, donc je ne vais pas fournir un échantillon.
Enfin, je mettrais en alerte dans votre rappel actif et assurez-vous que votre événement touche active est mise à feu en fait.
Autres conseils
La façon dont votre logique est écrit, je pense que vous devez faire un « toggleClass » sur les deux classes à l'intérieur de vos gestionnaires de clic qui ajoute une et retirez l'autre. Par exemple, lorsque votre élément « actif » est cliqué vous appuyez sur (ajouter) la classe BTN-slide, mais cela laissera la classe « active » en place aussi.
Bien sûr, au lieu d'utiliser « toggleClass » vous pouvez également utiliser « addClass » et « removeClass » d'être plus explicite.
Je recommande d'utiliser un outil comme Firebug pour regarder ce qui se passe dans votre DOM.
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#sidebar").animate({opacity: "show", left: "250"}, "slow");
$(this).toggleClass("active"); // add class
$(this).toggleClass("btn-slide"); // remove class
return false;
});
});
$(document).ready(function(){
$(".active").click(function(){
$("#sidebar").animate({opacity: "hide", right: "250"}, "slow");
$(this).toggleClass("active"); // remove class
$(this).toggleClass("btn-slide"); // add class
return false;
});
});
Cela fonctionne.
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#sidebar").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
Le code HTML
<div id="content">
<a href="#" id="ec">Expand / Contract</a>
<div id="main">
Watch Me Shrink Or Grow
</div>
</div>
Jquery
$(function() {
var ecswitch = 1;
/* prevent the annoying scroll back up thing */
$("#ec").click(function(e) {
e.preventDefault();
var x = $("#main").width(); // get element width
var y = $("#main").height(); // get element height
if(ecswitch == 1) {
$("#main").animate({opacity:0, hieght:"0", width:"0"}, 1300);
ecswitch = 0;
} else {
$("#main").animate({opacity:1, hieght:y, width:x}, 1300);
ecswitch = 1;
}
});
});
Le CSS
#main { height:200px; }
Explication
OK j'ai choisi de faire un peu différemment. ce à la hauteur initialise de notre expérience étant 200px et la largeur est automatique. Lorsque vous cliquez sur le lien hypertexte l'expérience est cachée dans 1.3 secondes et un commutateur est réglé sur 0. lorsque vous cliquez à nouveau, il revient sur une période de 1,3 secondes et le commutateur se prépare à 1. comme un interrupteur. Je l'Animer ici parce qu'un fondu simple, ou cacher me ... s'ennuyaient
La raison pour laquelle je suis arrivé les largeurs et hauteurs de l'élément avant de les zéro-ment a été si ladite largeur: 100% » et hieght: « 100% » dans mon Animer il le mettre à 100% des pages largeur et hauteur ... nous ne voulons pas.
NOTE: J'utilise aussi l'opacité sur une période de temps. très agréable pour la décoloration aussi bien:)