Как я могу положить свой div обратно к первоначальной ширине?

0

У меня есть один заголовок и одно меню, меню - скрытый div, который появляется, когда вы нажимаете на определенную кнопку.

Когда вы нажимаете эту кнопку, появляется скрытое меню, когда вы нажимаете снова, меню исчезает, как вы можете видеть, я использую Toggle для этого.

Но у меня проблемы, начальная ширина заголовка 100%, но когда вы открываете меню, оно меняет значение на 82, чтобы дать некоторое пространство для меню.

Когда я нажимаю на кнопку, div заголовка меняет значение на 82%, но когда я нажимаю снова, значение сохраняется на 82%, и я хочу снова перейти на 100%.

Я создал jsfiddle, чтобы показать, что происходит:

http://jsfiddle.net/c4tq8/

Когда вы нажимаете на hideshow, ширина изменяется, но когда вы снова нажимаете на hide/show, ширина не изменяется на 100% снова.

Здесь мой код

$("#hide").click(function(){

  $("#menu").fadeToggle();
  $('#header').toggle(function () {
       $("#header").css({"width":"82%","left":"18%"});
  }, function () {
$("#header").css({"width":"100%"});

  });

});

Спасибо.

Теги:

2 ответа

2
Лучший ответ

Это не точное решение для сброса css, но это даст вам ваши результаты.

Вместо использования .toggle() с .css(), вы должны рассмотреть возможность создания класса с нужным css, а затем с помощью .toggleClass().

пример

JS

$("#hide").click(function(){
    $("#menu").fadeToggle();
    $('#header').toggleClass('shifted');
});

CSS

#header.shifted {
    width: 82%;
    left: 18%;
}
  • 1
    Спасибо Мэтт, это работает.
1

Вам нужно переместить обработчик toggle за пределы обработчика click, поскольку toggle вызывает событие щелчка.

С http://api.jquery.com/toggle-event/

Метод.toggle() предоставляется для удобства. Сравнительно просто реализовать одно и то же поведение вручную, и это может быть необходимо, если предположения, встроенные в.toggle(), становятся предельными. Например,.toggle() не гарантированно работает правильно, если применить дважды к одному и тому же элементу. Поскольку.toggle() внутренне использует обработчик кликов для выполнения своей работы, мы должны отменить щелчок, чтобы удалить поведение, связанное с.toggle(), поэтому другие перехватчики могут быть пойманы в перекрестном огне. Реализация также вызывает.preventDefault() в событии, поэтому ссылки не будут соблюдаться, и кнопки не будут нажаты, если на элемент был вызван.toggle().

Поэтому это должно работать:

$("#hide").click(function(){
  $("#menu").fadeToggle();
});

$('#header').toggle(function () {
    $(this).css({"width":"82%","left":"18%"});
}, function () {
    $(this).css({"width":"100%", "left":"0%"});        
});

JSFiddle:

http://jsfiddle.net/c4tq8/12/

Ещё вопросы

Сообщество Overcoder
Наверх
Меню