Запретить скрытие блока при клике
Подскажите, пожалуйста, как реализовать, чтобы не закрывался блок .help_content при нажатии на него
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <style> .help_content { background: green; color: #fff; } .close { position: absolute; right: 32px; top: 32px; width: 32px; height: 32px; opacity: 0.3; } .close:hover { opacity: 1; } .close:before, .close:after { position: absolute; left: 15px; content: ' '; height: 33px; width: 2px; background-color: #333; } .close:before { transform: rotate(45deg); } .close:after { transform: rotate(-45deg); } </style> </head> <body> <div class="helptip-mod">БЛОК</div> <br/> <div class="helptip-mod">БЛОК2</div> <br/> <div class="helptip-mod">БЛОК3</div> <br/> <script> document.addEventListener("click",({target})=>{var resp='',rrp=''; if(target.closest(".helptip-mod")){ content=target.querySelector(".help_content"), otherСontent=document.querySelector(".helptip-mod .help_content"); if(otherСontent&&otherСontent!=content)otherСontent.remove(); if(content){ content.remove(); }else{ var tt ='<ul><li>номер 1</li><li>номер 2</li><li>номер 3</li><li>номер 4</li></ul>'; target.insertAdjacentHTML("beforeEnd",'<div class="help_content">'+tt+'<div class="close"></div></div>'); } } }); </script> </body> </html> |
Цитата:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!-- <script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> --> <style> .help_content { background: green; color: #fff; } .close { position: absolute; right: 32px; top: 32px; width: 32px; height: 32px; opacity: 0.3; } .close:hover { opacity: 1; } .close:before, .close:after { position: absolute; left: 15px; content: ' '; height: 33px; width: 2px; background-color: #333; } .close:before { transform: rotate(45deg); } .close:after { transform: rotate(-45deg); } </style> <script> </script> </head> <body> <div class="helptip-mod">БЛОК</div> <br/> <div class="helptip-mod">БЛОК2</div> <br/> <div class="helptip-mod">БЛОК3</div> <br/> <script> document.addEventListener("click",({target})=>{ if (target.className != 'helptip-mod') return var resp='',rrp=''; if(target.closest(".helptip-mod")){ content=target.querySelector(".help_content"), otherСontent=document.querySelector(".helptip-mod .help_content"); if(otherСontent&&otherСontent!=content)otherСontent.remove(); if(content){ content.remove(); }else{ var tt ='<ul><li>номер 1</li><li>номер 2</li><li>номер 3</li><li>номер 4</li></ul>'; target.insertAdjacentHTML("beforeEnd",'<div class="help_content">'+tt+'<div class="close"></div></div>'); } } }); </script> </body> </html> |
Ок, спасибо. А теперь при нажатии на .close блок не скрывается, подскажите, пожалуйста, как исправить
|
Цитата:
И действуй соответственно. ;) |
Цитата:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!-- <script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> --> <style> .help_content { background: green; color: #fff; } .close { position: absolute; right: 32px; top: 32px; width: 32px; height: 32px; opacity: 0.3; } .close:hover { opacity: 1; } .close:before, .close:after { position: absolute; left: 15px; content: ' '; height: 33px; width: 2px; background-color: #333; } .close:before { transform: rotate(45deg); } .close:after { transform: rotate(-45deg); } </style> <script> </script> </head> <body> <div class="helptip-mod">БЛОК</div> <br/> <div class="helptip-mod">БЛОК2</div> <br/> <div class="helptip-mod">БЛОК3</div> <br/> <script> document.addEventListener("click",({target})=>{ if (['helptip-mod', 'close'].indexOf(target.className) < 0) return var resp='',rrp=''; if(target.closest(".helptip-mod")){ content=target.querySelector(".help_content"), otherСontent=document.querySelector(".helptip-mod .help_content"); if(otherСontent&&otherСontent!=content)otherСontent.remove(); if(content){ content.remove(); }else{ var tt ='<ul><li>номер 1</li><li>номер 2</li><li>номер 3</li><li>номер 4</li></ul>'; target.insertAdjacentHTML("beforeEnd",'<div class="help_content">'+tt+'<div class="close"></div></div>'); } } }); </script> </body> </html> |
Андрей812,
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> .help_content { position: relative; background: green; color: #fff; } .close { position: absolute; right: 22px; top: 2px; width: 12px; height: 32px; opacity: 0.3; } .close:hover { opacity: 1; } .close:before, .close:after { position: absolute; left: 15px; content: ' '; height: 33px; width: 2px; background-color: #333; } .close:before { transform: rotate(45deg); } .close:after { transform: rotate(-45deg); } </style> <script> </script> </head> <body> <div class="helptip-mod">БЛОК</div> <br /> <div class="helptip-mod">БЛОК2</div> <br /> <div class="helptip-mod">БЛОК3</div> <br /> <script> document.addEventListener("click", ({ target }) => { let content = document.querySelector(".help_content"), mod; if (mod = target.closest(".helptip-mod")) { if (!mod.querySelector(".help_content")) { if (content) content.remove(); let tt = '<ul><li>номер 1</li><li>номер 2</li><li>номер 3</li><li>номер 4</li></ul>'; mod.insertAdjacentHTML("beforeEnd", '<div class="help_content">' + tt + '<div class="close"></div></div>'); } else if (target.closest(".close") || !target.closest(".help_content")) content.remove(); } else if (content) content.remove(); }); </script> </body> </html> |
СПАСИБО! КРУТО!
|
Часовой пояс GMT +3, время: 13:25. |