У меня есть один заголовок и одно меню, меню - скрытый div, который появляется, когда вы нажимаете на определенную кнопку.
Когда вы нажимаете эту кнопку, появляется скрытое меню, когда вы нажимаете снова, меню исчезает, как вы можете видеть, я использую Toggle для этого.
Но у меня проблемы, начальная ширина заголовка 100%, но когда вы открываете меню, оно меняет значение на 82, чтобы дать некоторое пространство для меню.
Когда я нажимаю на кнопку, div заголовка меняет значение на 82%, но когда я нажимаю снова, значение сохраняется на 82%, и я хочу снова перейти на 100%.
Я создал jsfiddle, чтобы показать, что происходит:
Когда вы нажимаете на hideshow, ширина изменяется, но когда вы снова нажимаете на hide/show, ширина не изменяется на 100% снова.
Здесь мой код
$("#hide").click(function(){
$("#menu").fadeToggle();
$('#header').toggle(function () {
$("#header").css({"width":"82%","left":"18%"});
}, function () {
$("#header").css({"width":"100%"});
});
});
Спасибо.
Это не точное решение для сброса css
, но это даст вам ваши результаты.
Вместо использования .toggle()
с .css()
, вы должны рассмотреть возможность создания класса с нужным css, а затем с помощью .toggleClass()
.
пример
JS
$("#hide").click(function(){
$("#menu").fadeToggle();
$('#header').toggleClass('shifted');
});
CSS
#header.shifted {
width: 82%;
left: 18%;
}
Вам нужно переместить обработчик 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: