0

Добрый день. Есть код на js, который сворачивает/разворачивает текст статей. Как сделать так, чтобы текст при первой загрузке страницы был уже свернут (по умолчанию)? И еще, как сделать так, чтобы класс folded добавлялся не кнопке, по которой кликнули, а родителю всего поста? Заранее спасибо.

js:

var foldBtns = document.getElementsByClassName("fold-button");

for (var i = 0; i < foldBtns.length; i++) {
  foldBtns[i].addEventListener("click", function(e) {
    if (e.target.className == "fold-button folded") {
      e.target.innerHTML = "свернуть";
      e.target.className = "fold-button";
      var displayState = "block";
    } else {
      e.target.innerHTML = "развернуть";
      e.target.className = "fold-button folded";
      var displayState = "none";
    }
    event.target
      .parentElement
      .getElementsByClassName('article-author')[0]
      .style.display = displayState;
    event.target
      .parentElement
      .getElementsByClassName('article-created-date')[0]
      .style.display = displayState;
    event.target
      .parentElement
      .getElementsByClassName('article-text')[0]
      .style.display = displayState;
  });
  foldBtns[i].addEventListener("click", function(event) {
    console.log("you clicked ", event.target);
  });
}
<div class="archive">
  {% for post in posts %}
  <div class="one-post">
    <h2 class="post-title"><a href="http://127.0.0.1:8000/article/{{post.id}}"> {{ post.title }}</a></h2>
    <button class="fold-button">свернуть</button>
    <div class="article-info">
      <div class="article-author">{{ post.author.username }}</div>
      <div class="article-created-date">{{ post.created_date }}</div>
    </div>
    <p class="article-text">{{ post.get_excerpt }}</p>
  </div>
  {% endfor %}
</div>
<script src="{{ STATIC_URL }}js/fold-post.js"></script>

1
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). Commented 15 нояб. 2016 в 6:37

1 ответ 1

0

Ну по хорошему, легче всего немного поправить сам HTML и поменять кнопку

<button class="fold-button">свернуть</button>

на аналогичную "развернуть" с классом .folded. На артикли с данными лучше тоже повесить стиль типа "show" или "hide". И тогда не придется искать style.display (как и хранить его состояние).

Ну и пару советов :

  1. displayState вынесите объявление вне цикла и сделайте присваивание уже объявленной переменной ( т.е. в цикле без var).

  2. Если вы прячете блок, то стоит применить display:none только к одному из родительских блоков, т.к. если все правильно сделано, то дочерние блоки скроются вместе с родительским (в вашем случае это может быть блок, который обернет article-info и article-text и будет назван например классом article)

Ваш ответ

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

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