Как скрыть JS

Тема закрыта by

faerkot
Причина: Вопрос решён

Jack Sparrow , Какое именно? В JS не силён(

faerkot (21.11.2021 в 14:02)
ГАСКОНЕЦ , Так вот не хотелось бы подключать библиотеки из-за одной страницы... Проще, наверное, тогда будет оставить всё как есть. Интересно, будет ли пользователей бесить то, что это выпадающее меню не исчезает при клике на пустом месте?))

будет бесить)) я себе переделал и шикарно)) а то что тебе выше кидают не стоит и смотреть))) они просто не совсем тебя поняли наверное))

faerkot (21.11.2021 в 13:23)
Всем привет!
На сайте выводятся комментарии пользователей и у каждого сообщения есть кнопка (например, 3 точки вертикально) для того, чтобы выпало небольшое меню (ответить, удалить и т.д) на JS. При повторном нажатии на кнопку это меню снова скрывается.
Стандартный код JS открытия/исчезновения:

javascript

   function disnone(rid) { 
 if (document.getElementById(rid).style.display == "none") { 
 document.getElementById(rid).style.display = "block"; 
 } 
 else { 
 document.getElementById(rid).style.display = "none"; 
 } 
 }

Вопрос: Как сделать, чтобы элемент скрывался не только при клике на эту кнопку, а при клике в любом свободном месте сайта?
Пример на JSf - https://jsfiddle.net/wb8pxLcj/

Как то так

javascript

   document.addEventListener('click', e => { 
   const target = e.target; 
   if (!target.closest('.menu')) { 
      document.querySelector('.menu').style.display = 'none'; 
      console.log('клик вне блока menu') 
   } 
 })

Screenshot_29.png 8.9 Kb ⬇ 194

________
посл. ред. 21.11.2021 в 14:28; всего 3 раз(а); by Мистика

Мистика , Это сработает, если мы знаем, что название открытого элемента - "menu" и он один элемент на странице, а если их несколько на странице? Например:
На первой странице: menu-1, menu-2, menu-3
На второй странице: menu-4, menu-5, menu-6
.......
На тысячной странице: menu-1001, menu-1002, menu-1003
Как закрыть именно тот, который открыт? Или это вообще не реально?

faerkot , Сейчас я перепишу немного код и будет работать

faerkot ,
Вот. Весь свой JS связанный с меню можешь удалить.
И называть menu-1, menu-2, menu-3 и т.д не обязательно.

javascript

   <!DOCTYPE html> 
 <html lang="en"> 
 <head> 
     <meta charset="UTF-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <title>Document</title> 
     <style> 
         .menu-list { 
             z-index:100; 
             display:none; 
             position:absolute; 
             top:35px; 
             left:15px; 
             width:170px; 
             background-color:#999; 
         } 
  
         .d-block { 
             display: block; 
         } 
  
         .menu-link { 
             display:block; 
             padding:7px 0; 
         } 
     </style> 
 </head> 
 <body> 
     <div style="position:relative;"> 
         <a href="#" class="menu-button"> 
             Кнопка 
             <div class="menu-list"> 
                 <a href="#" class="menu-link">Ответить</a> 
                 <a href="#" class="menu-link">Пожаловаться</a> 
             </div> 
         </a> 
     </div> 
     <div style="position:relative;"> 
         <a href="#" class="menu-button"> 
             Кнопка 
             <div class="menu-list"> 
                 <a href="#" class="menu-link">Ответить</a> 
                 <a href="#" class="menu-link">Пожаловаться</a> 
             </div> 
         </a> 
     </div> 
     <div style="position:relative;"> 
         <a href="#" class="menu-button"> 
             Кнопка 
             <div class="menu-list"> 
                 <a href="#" class="menu-link">Ответить</a> 
                 <a href="#" class="menu-link">Пожаловаться</a> 
             </div> 
         </a> 
     </div> 
     <script> 
  
         /* Скрыть все менюшки */ 
         const hideAllMenuList = (currentMenu) => { 
             try { 
                 document.querySelectorAll('.menu-list').forEach(menu => { 
                     if (currentMenu !== menu) { 
                         menu.classList.remove('d-block'); 
                     } 
                 }) 
             } catch (error) { 
                 console.error(error); 
             } 
         } 
  
         document.addEventListener('click', e => { 
             const target = e.target; 
  
             /* Показать/скрыть менюшку при клике на кнопку */ 
             if (target.closest('.menu-button')) { 
                 e.preventDefault(); 
                  
                 if (target.parentElement.querySelector('.menu-list')) { 
                     const menuList = target.parentElement.querySelector('.menu-list'); 
                     hideAllMenuList(menuList); 
                     if (menuList.classList.contains('d-block')) { 
                         menuList.classList.remove('d-block'); 
                     } else { 
                         menuList.classList.add('d-block'); 
                     } 
                 } 
  
             } 
  
             /* Скрытие всех меню при клике на ссылку в меню */ 
             if (target.classList.contains('menu-link')) { 
                 hideAllMenuList(); 
             } 
  
             /* Скрытие всех меню при клике вне самого меню */ 
             if (!target.closest('.menu-button')) { 
                 hideAllMenuList(); 
             } 
         }) 
     </script> 
 </body> 
 </html>

________
посл. ред. 21.11.2021 в 15:48; всего 4 раз(а); by Мистика

Мистика , Лопни мои глаза - работает и без id. Правда, при клике на "Кнопка", когда меню уже открыто, то оно не закрывается почему-то)
А как думаешь, этот скрипт будет поддерживаться мобильными устройствами или он скорее для продвинутых браузеров?

Мистика , Блин, сорри, что не могу поставить тебе +1 к репе т.к пишет, что у меня маловат рейтинг((

del
________
посл. ред. 21.11.2021 в 15:54; всего 2 раз(а); by Вилы Выкидные

Вилы Выкидные , Ну вон же - есть решение (От Мистика) или оно тебе не нравится?))