Изменить стиль с помощью JS

260

11 марта 2017, 03:35

Есть меню. При клике оно выезжает вниз. Так же есть div с классом .doc-info. Нужно переделать скрипт так, чтобы при выезде меню, у .doc-info padding-top: с 320px менялся на 420px, к примеру. И чтоб при выполнении else, padding обратно слетал на 320px. То есть вопрос в том, как добавить через JS стиль padding-top: 420px и убрать его при повтором клике? Надеюсь понятно объяснил.

// TOGGLE MNU MOBILE SANDWICH
$(".toggle-mnu").click(function() {
  $(".sandwich").toggleClass("active");
}); 
$(".toggle-mnu").click(function() {
  if ($(".hidden-mnu").is(":visible")) {
    $(".hidden-mnu").slideUp();
  } else {
    $(".hidden-mnu").slideToggle();
  }
});

Answer 1

Добавлять можно через стандартную функцию css:

$('.my-block').click(function() { 
  $(this).css('padding-top', '50px'); 
});

.my-block { 
  width: 100px; 
  height: 100px; 
  background-color: black; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="my-block"></div>

Через добавление класса addClass:

$('.my-block').click(function() { 
  $(this).addClass('my-block_padding-top--50px'); 
  // Для удаления .removeClass(); 
});

.my-block { 
  width: 100px; 
  height: 100px; 
  background-color: black; 
} 
 
.my-block_padding-top--50px { 
  padding-top: 50px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="my-block"></div>

Answer 2

$('div').click(function() { 
  $('div').toggleClass('padding'); 
});

div { 
  width: 300px; 
  height: 300px; 
  background: red; 
} 
 
div.padding {padding: 10px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div></div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Почему некорректно работает ng-if?

embedplnkr

253

javascript

Как добавить webpack

после такого запроса в терминале phpstorm: webpack/src/index

1465

javascript

Как сделать перенос строки по заданной позиции в строке

Как можно сделать перенос строки на каждом n'ом символе? Подскажите пожалуйста

323

javascript

Can you recommend 3d game engine for the web like this? [требует правки]

What is engine of HordesIO? What engine like that you can recommend for 3d rpg's with open space?

355