Как максимизировать ширину плавающего элемента, когда один элемент удален или скрыт

Question

У меня есть две боковые панели столбцов div (слева) и содержимое страницы (справа).Я переключаю удаление и добавление «боковой панели» с помощью jquery, но не могу развернуть «# page-content», чтобы занять пустое место при удалении боковой панели.но # page-content идет ко дну.Короче говоря, я хочу

Переключить до

|боковая панель |page-content |

Переключение после

|page-content |

но бывает так:

|боковая панель |
|page-content |

Пожалуйста, помогите.Здесь используются CSS и JQuery.Спасибо

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

Ну, это должно сработать на самом деле.

Попробуйте добавить функцию обратного вызова в .toggle(), где вы анимируете / удалите поле из вашего контента, например:

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

    return false;
 });
});

рабочий пример: http://jsbin.com/eqiyu/edit

обновленная версия от Рейгеля: [jsbin.com/eqiyu/2][2]

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

Answer 2

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

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

Предполагая, что левое поле на # page-content не перекрывает #sidebar, после запуска $ ("sidebar"). Toggle () вам нужно установить для поля # page-content значение либо0 или 250 пикселей в зависимости от состояния переключателя.

$(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);
        });
    });
});

Answer 3

#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;
}