Форум

ArtemBielykh · #1 (**permalink**) 20.01.2017, 21:12

Всем привет!

В программировании новичок. Изучаю JS первый месяц. Сегодня сваял свой первый скрипт. Хотел сделать спойлер на JS. Показать некому, решил написать на форум.

Если кому не лень, гляньте, нужен Ваш совет! Оцените сие творение.

Песочница: https://jsfiddle.net/2r9Ls1LL/

Какие есть грубые ошибки? Что можно реализовать концептуально иначе?

P.S. Сам же вижу один бок. Если внутри div.heading будут вложенные элементы, то клик по ним не раскроет спойлер.
Спасибо.

рони · #2 (**permalink**) 20.01.2017, 22:04

ArtemBielykh,
вариант ...

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  box-sizing: border-box;
}
.container{
  width: 60%;
  margin: auto;
}
.spoiler-box{
  width: 100%;
}
.spoiler{
  border: 1px solid #ccc;
  margin-bottom: 0.5em;
}
.heading, .content{
  padding: 0.5em;
}
.heading{
  background-color: #eee;
  cursor: pointer;
}
.content{
  display: none;
}
.content[style="display: block;"]{
  border-top: 1px solid #ccc;
}
.open + .content{
  display:  block;
}

  </style>

  <script>
window.addEventListener('DOMContentLoaded', function() {
var elem = document.body;
elem.addEventListener("click", openCloseSpoiler);
function openCloseSpoiler(event) {
    var whereDoClick = event.target;
    if (whereDoClick.classList.contains("heading")) {
        var parent = whereDoClick.parentNode.parentNode;
        [].forEach.call(parent.querySelectorAll(".heading"), function(el) {
            el == whereDoClick ? el.classList.toggle("open") : el.classList.remove("open")
        })
    }
};
    });
  </script>
</head>

<body>
  <section class="container">

    <div class="spoiler-box" id="slider-box">

      <div class="spoiler">
        <div class="heading">Spoiler title</div>
        <div class="content">

          <div class="spoiler">
            <div class="heading">Spoiler title</div>
            <div class="content">Spoiler content</div>
          </div>

          <div class="spoiler">
            <div class="heading">Spoiler title</div>
            <div class="content">Spoiler content</div>
          </div>

        </div>
      </div>

      <div class="spoiler">
        <div class="heading">Spoiler title</div>
        <div class="content">Spoiler content</div>
      </div>

      <div class="spoiler">
        <div class="heading">Spoiler title</div>
        <div class="content">Spoiler content</div>
      </div>

      <div class="spoiler">
        <div class="heading">Spoiler title</div>
        <div class="content">Spoiler content</div>
      </div>

    </div>

  </section>



</body>
</html>

ArtemBielykh · #3 (**permalink**) 20.01.2017, 22:26

рони, спасибо, буду вникать.

Форум

Справочник

Discord чат

Курсы javascript