Показать сообщение отдельно
  #6 (permalink)  
Старый 27.06.2019, 20:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

зависимые клики
Андрей812,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .helptip {
     height: 35px;
     background-color: hsl(328, 100%, 54%);
     width: 200px;
     display: block;
     margin: 4px;
    }

  </style>

  <script>
     document.addEventListener("click", ({target}) => {
     if (target.closest(".helptip")) {
     const html = `<div class="help_content">Текст<div class="jclose"></div></div>`,
           content = target.querySelector(".help_content"),
           otherСontent = document.querySelector(".helptip .help_content");
     if(otherСontent && otherСontent != content) otherСontent.remove();
     content ? content.remove() : target.insertAdjacentHTML("beforeEnd", html);
        }
    })
  </script>
</head>

<body>
<span class="helptip"></span>
<span class="helptip"></span>
</body>
</html>
Ответить с цитированием