Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.10.2017, 20:10
Новичок на форуме
Отправить личное сообщение для inviktiv Посмотреть профиль Найти все сообщения от inviktiv
 
Регистрация: 12.08.2017
Сообщений: 5

Доработать код
Нужно доработать код так, что бы его можно было использовать несколько раз на одной странице, но при этом, не открывались все блоки, а только тот, на который мы нажали.

https://jsfiddle.net/jpqbsw6m/
Ответить с цитированием
  #2 (permalink)  
Старый 12.10.2017, 20:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

открывашка делегирование закрыть по клику вне блока
inviktiv,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
html, body {
  height: 100%;
}
.btn {
  border: 1px solid red;
  padding: 5px 10px;
}
.btn-open {
  background: #f00;
  cursor: pointer;
}
.modal {
  display: none;
  background: rgba(0,0,0,0.7);
  width: 300px;

}
.hide {
  //display: none;
}

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    $(document).on("click", function(event) {
        var elem = $(event.target),
            btn = $(".btn"),
            popup = $(".modal");
        if (elem.is(".btn")) {
            event.stopPropagation();
            var indx = btn.index(elem);
            elem.toggleClass("btn-open btn-close");
            popup.eq(indx).slideToggle()
        } else if (elem.closest(popup).length) return;
        else if (btn.is(".btn-close")) {
            popup.slideUp();
            btn.filter(".btn-close").toggleClass("btn-open btn-close")
        }
    })
});
  </script>
</head>

<body>
<span class="btn btn-open">btn</span>
  <ul class="modal">
  <li>text1</li>
  <li>text2</li>
  <li>text3</li>
  <li>text4</li>
  <li>text5</li>
  </ul>
<p></p>
<span class="btn btn-open">btn</span>
  <ul class="modal">
  <li>text1</li>
  <li>text2</li>
  <li>text3</li>
  <li>text4</li>
  <li>text5</li>
  </ul>
</body>
</html>
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как найти и заменить код скрипта на странице на другой код? smls Общие вопросы Javascript 2 18.07.2016 22:01
"Оживите" код с хабра - https://habrahabr.ru/sandbox/51453/ Daniil2206 Node.JS 0 11.05.2016 18:09
Код ответа сервера и обновление iframe alexdemi911 Общие вопросы Javascript 6 10.08.2015 22:30
Аккордеон меню, как доработать код. Gawk Общие вопросы Javascript 1 23.07.2012 13:01
Требуется выводить код рекламного блока Adsense из файла JavaScript??? speedflow Элементы интерфейса 0 26.05.2012 15:50