Свернутый текст по умолчанию

295

26 ноября 2016, 17:53

Добрый день. Есть код на 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>

Answer 1

Ну по хорошему, легче всего немного поправить сам HTML и поменять кнопку <button class="fold-button">свернуть</button> на аналогичную "развернуть" с классом folded. На артикли с данными лучше тоже повесить стиль типа "show" или "hide". И тогда не придется искать style.display (как и хранить его состояние).

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

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

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