Форум

AndreasW33D · #1 (**permalink**) 04.12.2018, 20:00

Сделал 2 тренировочных кнопки "Скрыть" и "Развернуть", ну и собственно написал к ним простые функции с помощью jQuery , оно то работает , скрывает и разворачивает, но свернуть и развернуть могу только 1 раз, дальше кнопки не работают. Чтобы снова работали приходится перезапустить страницу. Как исправить?

HTML код:
<nav class="menu">
<ul>
<li class="active"><a href="">Пункт</a></li>
<li><a href="">Пункт</a></li>
<li><a href="">Пункт</a></li>
<li><a href="">Пункт</a></li>
</ul>
<input type="button" value="свернуть" onclick="a()"/>
</nav>
<input type="button" value="развернуть" onclick="b()"/>
и JS
var stil = $('.menu');
function a(){
stil.addClass("men")
};
function b(){
stil.addClass("menz");
}

рони · #2 (**permalink**) 04.12.2018, 20:15

AndreasW33D,
removeClass где?

AndreasW33D · #3 (**permalink**) 04.12.2018, 20:21

спасибо большое, написал просто 2 разных стиля , в одном display: none а в другом display: block , сменил на removeClass, работает

рони · #4 (**permalink**) 04.12.2018, 20:24

AndreasW33D,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  nav{
      display: none;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
  $(".open").click(function() {
    $('.menu').slideToggle()
})
});
  </script>
</head>

<body>
<nav class="menu">
<ul>
<li class="active"><a href="">Пункт</a></li>
<li><a href="">Пункт</a></li>
<li><a href="">Пункт</a></li>
<li><a href="">Пункт</a></li>
</ul>
<input type="button" value="свернуть"   class="open">
</nav>
<input type="button" value="развернуть" class="open"/>

</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript