Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.01.2017, 21:12
Интересующийся
Отправить личное сообщение для ArtemBielykh Посмотреть профиль Найти все сообщения от ArtemBielykh
 
Регистрация: 17.01.2017
Сообщений: 13

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

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

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

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

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

P.S. Сам же вижу один бок. Если внутри div.heading будут вложенные элементы, то клик по ним не раскроет спойлер.
Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 20.01.2017, 22:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,433

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>
Ответить с цитированием
  #3 (permalink)  
Старый 20.01.2017, 22:26
Интересующийся
Отправить личное сообщение для ArtemBielykh Посмотреть профиль Найти все сообщения от ArtemBielykh
 
Регистрация: 17.01.2017
Сообщений: 13

рони, спасибо, буду вникать.
Ответить с цитированием
  #4 (permalink)  
Старый 20.01.2017, 22:45
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,579

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


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужен скрипт подбора по параметрам spamkirill00 Работа 10 13.01.2017 14:19
Нужен 1 скрипт создания таблицы с фильтром artsmart Работа 2 26.05.2014 13:12
Очень нужен скрипт для лёгкого интернет магазина samael Общие вопросы Javascript 3 26.06.2012 10:35
оцените мой jQuery скрипт Денис Белкин Ваши сайты и скрипты 4 20.04.2010 15:28