Основная предпосылка моего сайта - шесть больших ящиков, которые сжимаются в графическом меню при нажатии любой из них. Для кнопки "Домой" добавляется дополнительный значок.
Чтобы правильно расположить ящики в первом макете сетки, я включил несколько дополнительных классов, таких как margin-zero
, bottom-left
и bottom-right
. Мне нужно удалить эти классы, когда изображения будут сжаты, и верните их, когда они будут расширены до полного размера.
Итак, я создал небольшое утверждение if
.
var counter = 0;
if(counter = 0) {
jQuery(".two").toggleClass( "two-menu" );
jQuery(".four").toggleClass( "four-menu" );
jQuery(".images").toggleClass( "images-menu" );
jQuery(".home").toggleClass( "home-menu" );
jQuery(".four").removeClass( "bottom-left" );
jQuery(".four").removeClass( "bottom-right" );
jQuery(".two").removeClass( "margin-zero" );
var counter = 1;
} else {
jQuery(".two").toggleClass( "two-menu" );
jQuery(".four").toggleClass( "four-menu" );
jQuery(".images").toggleClass( "images-menu" );
jQuery(".home").toggleClass( "home-menu" );
jQuery(".four").addClass( "bottom-left" );
jQuery(".four").addClass( "bottom-right" );
jQuery(".two").addClass( "margin-zero" );
var counter = 0;
}
Мне кажется, что это должно сработать. Однако в моем прототипе JSFiddle это не так. Вот ссылка, поэтому вы можете увидеть весь код и как определенные поля рядом со страницей.
возможно, вы это имели в виду?
var toggle =0;
function toggleIt() {
toggle=!toggle;
$(".two").toggleClass("two-menu",toggle);
$(".four").toggleClass( "four-menu",toggle);
$(".images").toggleClass( "images-menu",toggle);
$(".home").toggleClass( "home-menu",toggle);
$(".four").toggleClass( "bottom-left",!toggle );
$(".four").toggleClass( "bottom-right",!toggle );
$(".two").toggleClass( "margin-zero",!toggle );
}
Вы можете попробовать:
if(counter == 0) {
Изменение: также вы объявляете счетчик 3 раза.
counter = 1;
Вам не нужно повторно объявлять это.
if(counter = 0) {
, вместо него должно быть==
. Хотя, похоже, это не очень-то исправляет.