单击 div 内容或 div 中的按钮时如何关闭元素？

Question

我有一个带有一些文本的 div，当单击按钮时，我希望这些文本出现在父 div 的顶部。 这意味着当这个新的 div 处于活动状态时，如果有大量文本，打开/关闭按钮（更多信息按钮）会被阻止。 所以理想情况下，我希望新 div 中的一个按钮能够关闭它。 我想我写错了我的 JS，所以关闭按钮不起作用。 我尝试添加其他规则，一个全新的 function 来display:none ，我被卡住了。 任何帮助将不胜感激。 如果可能的话，我也想坚持香草 JavaScript。

 var infoBtn = document.getElementsByClassName("more-info"); var i; for (i = 0; i < infoBtn.length; i++) { infoBtn[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.maxHeight) { content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } }) }

 .work-projects { margin: 40px 0; }.work-boxes { display: flex; position: relative; flex-direction: column; align-items: center; justify-content: center; width: 90%; height: 40vh; min-height: 300px; margin: 20px auto; background-color: white; border-radius: 5px; }.work-box-content { opacity: 1; z-index: 1; background-color: rgb(32, 32, 32); padding: 20px; width: 50%; border: 5px solid rgba(253, 225, 78); border-radius: 5px; position: relative; }.work-projects h2 { color: turquoise; text-align: center; font-weight: 400; font-size: 1.2em; }.work-box-content.code-logo { flex-direction: row; align-self: center; justify-content: space-around; max-width: 100%; } #PHP-pic { height: auto; margin: auto 0; }.project-links { display: flex; justify-content: space-between; }.project-links img { height: 30px; width: auto; transition: all.2s ease-in-out; }.project-links a { padding: 20px; text-decoration: none; margin: 5px 0; }.project-links a:hover img { filter: opacity(60%); transform: scale(1.1); }.sidenav { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 0 5px; z-index: 200; margin: 0; background-color: turquoise; text-align: center; max-height: 0; overflow: hidden; transition: max-height 0.25s ease-out; }.more-info { height: 30px; width: auto; display: block; padding: 5px; margin: 0 auto; }.sidenav p { font-size: 0.7em; }

 <main class="main-page"> <div class="work-projects" id="work-bookmark"> <div class="work-boxes" id="sectionone"> <div class="work-box-content"> <h2>TITLE</h2> <div class="code-logo"> <figure> <img id="HTML-pic" src="./images/HTML5.png" alt="HTML"> </figure> <figure> <img id="CSS-pic" src="./images/CSS3.png" alt="CSS"> </figure> <figure> <img id="JS-pic" src="./images/JS.png" alt="JS"> </figure> <figure> <img id="PHP-pic" src="./images/php.png" alt="PHP"> </figure> </div> <section class="project-links"> <a class="github-project" href="https://github.com/adraf/Dan-Batchelor"> <img src="./images/iconmonstr-github-2.png" alt="github logo"> </a> <a class="linktoproject" href="http://danbatch.com/"> <img src="./images/iconmonstr-share-11.png" alt="website link"> </a> </section> <img class="more-info" src="./images/iconmonstr-info-1-240.png" alt="more information"> <div id="mySidenav" class="sidenav"> <p> Text tetxt text Text tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt text <br> Text tetxt text Text tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt text</p> </div> </div> </div> </div> </main>

Answer 1

您可以使用第二个事件侦听器来实现这一点，用于单击 div（其 ID mySidenav ）。

工作示例：

 var infoBtn = document.getElementsByClassName("more-info"); var i; for (i = 0; i < infoBtn.length; i++) { infoBtn[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.maxHeight) { content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } }) document.querySelector("#mySidenav").addEventListener('click', function() { this.style.maxHeight = null; }); }

 .work-projects { margin: 40px 0; }.work-boxes { display: flex; position: relative; flex-direction: column; align-items: center; justify-content: center; width: 90%; height: 40vh; min-height: 300px; margin: 20px auto; background-color: white; border-radius: 5px; }.work-box-content { opacity: 1; z-index: 1; background-color: rgb(32, 32, 32); padding: 20px; width: 50%; border: 5px solid rgba(253, 225, 78); border-radius: 5px; position: relative; }.work-projects h2 { color: turquoise; text-align: center; font-weight: 400; font-size: 1.2em; }.work-box-content.code-logo { flex-direction: row; align-self: center; justify-content: space-around; max-width: 100%; } #PHP-pic { height: auto; margin: auto 0; }.project-links { display: flex; justify-content: space-between; }.project-links img { height: 30px; width: auto; transition: all.2s ease-in-out; }.project-links a { padding: 20px; text-decoration: none; margin: 5px 0; }.project-links a:hover img { filter: opacity(60%); transform: scale(1.1); }.sidenav { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 0 5px; z-index: 200; margin: 0; background-color: turquoise; text-align: center; max-height: 0; overflow: hidden; transition: max-height 0.25s ease-out; }.more-info { height: 30px; width: auto; display: block; padding: 5px; margin: 0 auto; }.sidenav p { font-size: 0.7em; }

 <main class="main-page"> <div class="work-projects" id="work-bookmark"> <div class="work-boxes" id="sectionone"> <div class="work-box-content"> <h2>TITLE</h2> <div class="code-logo"> <figure> <img id="HTML-pic" src="./images/HTML5.png" alt="HTML"> </figure> <figure> <img id="CSS-pic" src="./images/CSS3.png" alt="CSS"> </figure> <figure> <img id="JS-pic" src="./images/JS.png" alt="JS"> </figure> <figure> <img id="PHP-pic" src="./images/php.png" alt="PHP"> </figure> </div> <section class="project-links"> <a class="github-project" href="https://github.com/adraf/Dan-Batchelor"> <img src="./images/iconmonstr-github-2.png" alt="github logo"> </a> <a class="linktoproject" href="http://danbatch.com/"> <img src="./images/iconmonstr-share-11.png" alt="website link"> </a> </section> <img class="more-info" src="./images/iconmonstr-info-1-240.png" alt="more information"> <div id="mySidenav" class="sidenav"> <p> Text tetxt text Text tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt text <br> Text tetxt text Text tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt text</p> </div> </div> </div> </div> </main>