0

Есть такой код

jQuery(function($) {
  $('.expand').click(function() {
    $('.info', this).toggle();
  });
});
.expand {
  cursor: pointer;
}

.expand:before {
  content: '+';
  margin-right: 1ex;
}

.info {
  display: none;
  margin-left: 2ex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="expand">Expand
  <div class="info">Info</div>
</div>

Вопрос: как бы минимальными усилиями при раскрытии узла менять начальный + на -?

1
  • кстати библиотека : jstree.com/demo
    – user33274
    6 мая 2018 в 23:28

3 ответа 3

3

jQuery(function($) {
  $('.expand').click(function() {
    $(this).toggleClass('opened');
  });
});
.expand {
  cursor: pointer;
}

.expand:before {
  content: '+';
  margin-right: 1ex;
}

.expand.opened:before {
  content: '-';
  margin-right: 1.5ex;
}

.info {
  display: none;
  margin-left: 2ex;
}

.opened .info {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="expand">Expand
  <div class="info">Info</div>
</div>

3
  • 1
    Спасибо. Вчера лег спать и перед сном сам пришел к такому же коду. Единственная ремарка - если вместо класса opened использовать closed, то css получается немного компактнее 7 мая 2018 в 7:31
  • да, классы можно как угодно назвать
    – Pavel
    7 мая 2018 в 7:31
  • Дело не в названии. У closed логика будет инверсная 7 мая 2018 в 7:33
1

Костыльный вариант на HTML+CSS:

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial;
}

a {
  color: black;
  text-decoration: none;
}

/*BEGIN | MAIN*/
.list {
  position: relative;
  list-style-type: none;
  display: none;
  margin-left: 0.4rem;
}

.collapse {
  margin: 0.5rem 1.2rem;
  position: relative;
}

label {
  cursor: pointer;
  user-select: none;
  font-size: 1.5em;
}

label::before {
  content: "+";
  color: gray;
  position: absolute;
  top: 0;
  left: -1rem;
}

#toggle {
  display: none;
}

#toggle:checked~.list {
  display: block;
}

#toggle:checked~label::before {
  content: "-";
}
/*END | MAIN*/
<div class="collapse">
  <input type="checkbox" id="toggle">
  <label for="toggle">Expand</label>
  <ul class="list">
    <li><a href="#">first</a></li>
    <li><a href="#">second</a></li>
    <li><a href="#">third</a></li>
  </ul>
</div>

3
  • Конечно сложно назвать решением, но как минимум без JS:D
    – Arthur
    7 мая 2018 в 9:23
  • 2
    Нормальное решение, учитывая его принципиально отличие от предидущих
    – slowBro
    7 мая 2018 в 9:40
  • 1
    Мне не пригодится, но идея красивая 7 мая 2018 в 11:31
0

jQuery(function($) {
  $('.expand').click(function() {
    $(this).toggleClass('closed');
  });
});
.expand {
  cursor: pointer;
}

.expand:before {
  content: '\2013';
  margin-right: 1ex;
}

.closed.expand:before {
  content: '+';
}

.info {
  margin-left: 2ex;
}

.closed .info {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="expand closed">Expand
  <div class="info">Info</div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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