2

Есть меню с подменю. При нажатии на + список раскрывается. Как сделать так чтобы после раскрытия вместо плюса уже был минус. Вот код:

.menu,
#go {
  display: none;
}

.st {
  padding: 0 20px 0 20px;
  background: green;
  cursor: pointer;
  color: white;
}

#go:checked~.menu {
  display: block;
}
<input id="go" type="checkbox" />
<label for="go" class="st">+</label>
<ul class="menu">
  <li><a href="#">подпункт 1</a></li>
  <li><a href="#">подпункт 2</a></li>
  <li><a href="#">подпункт 3</a></li>
</ul>

1 ответ 1

3

Если на css, то можно псевдоэлементом.

.menu,
#go {
  display: none;
}

.st {
  padding: 0 20px 0 20px;
  background: green;
  cursor: pointer;
  color: white;
}
.st:before{
  content:'+';
}
:checked+.st:before{
  content:'-';
}

#go:checked~.menu {
  display: block;
}
<input id="go" type="checkbox" />
<label for="go" class="st"></label>
<ul class="menu">
  <li><a href="#">подпункт 1</a></li>
  <li><a href="#">подпункт 2</a></li>
  <li><a href="#">подпункт 3</a></li>
</ul>

1
  • Спасибо большое
    – Juicy
    4 окт 2018 в 8:51

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.