Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Мой первый скрипт. Нужен совет! (https://javascript.ru/forum/dom-window/66974-mojj-pervyjj-skript-nuzhen-sovet.html)

ArtemBielykh 20.01.2017 21:12

Мой первый скрипт. Нужен совет!
 
Всем привет!

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

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

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

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

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

рони 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 20.01.2017 22:26

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

Rise 20.01.2017 22:45

ArtemBielykh, настрой fiddle: JAVASCRIPT / LOAD TYPE / No wrap - in <body> ибо у тебя DOMContentLoaded не выполняется.


Часовой пояс GMT +3, время: 02:43.