Comment maximiser une largeur div flottante quand un div est enlevé ou caché?

Question

J'ai deux colonnes div colonnes (gauche) et page-contenu (droite). Je bascule en supprimant et en ajoutant 'sidebar' en utilisant jquery mais incapable de maximiser '# page-content' pour occuper l'espace vide quand sidebar est supprimé. J'ai essayé de supprimer 'margin-left: 250px;' mais le # contenu de la page va vers le bas. Bref je veux

bascule avant

| barre latérale | contenu de la page |

Basculer après

| page-content                                 |

mais cela se produit comme

| barre latérale |
| page-content                                 |

Aidez-nous s'il vous plaît. Voici le css et la jquery utilisés. Thanx

css

#sidebar { 
    float:left; 
    width:185px; 
    color:#333; 
    padding:25px 25px; 
} 

#page-content { 
    margin-left:250px; 
    padding:25px 35px 25px 25px; 
    color:#333; 
} 

jQuery

$(document).ready(function() { 
$('a#side-toggle').click(function() { 
    $('#sidebar').toggle(400); 

return false; 
    }); 
}); 

Answer 1

Eh bien, il devrait fonctionner effectivement.

Essayez d'ajouter une fonction de rappel à .toggle() où vous animez/supprimer la marge de votre contenu, comme:

$(document).ready(function() { 
    $('a#side-toggle').click(function() { 
    $('#sidebar').toggle(400, function(){ 
     $('.page-content').animate({marginLeft: '0'}, 1000); 
    }); 

    return false; 
}); 
}); 

exemple de travail: http://jsbin.com/eqiyu/edit

version mise à jour de Reigel: [jsbin.com/ eqiyu/2] [2]

[2]: http: // jsbin.com/eqiyu/2

Answer 2

#sidebar { 
    position:absolute; 
    left:0; 
    top:0; 
    width:185px; 
    color:#333; 
    padding:25px 25px; 
} 

#page-content { 
    margin-left:250px; 
    padding:25px 35px 25px 25px; 
    color:#333; 
} 

Answer 3

#sidebar { 
    position: absolute; 
    top: 0; 
    left: 0; 
    /**/ 
} 

#page-content { 
    position: absolute; 
    top: 0; 
    left: 0; 
    margin-left: 250px; 
    /**/ 
} 

En supposant que la marge de gauche sur # page-contenu est de sorte qu'il ne chevauche pas #sidebar, après avoir exécuté $ ("sidebar"). Toggle(), vous devez définir # marge de contenu de page à 0 ou 250px sur l'état de la bascule.

$(document).ready(function() { 
    $("a#side-toggle").click(function() { 
     $("#sidebar").toggle(400, function() { 
      var m = ($("#page-content").css("margin-left") == 250 ? 0 : 250) + "px"; 
      $("#page-content").animate({ marginLeft : m }, 400); 
     }); 
    }); 
});