我需要用 VANILLA JS 而不是 jquery 制作嵌套手风琴，我在打开内部手风琴时遇到问题
[英]I need to make a nested accordion with VANILLA JS, not jquery, i have a problem opening inner accordions
问题描述
So, I made a nested accordion, and it works find with outer elements, but inner elements don't seem to be expanding, when I click them, the outer gets display:none .
所以，我做了一个嵌套的手风琴，它与外部元素一起工作 find ，但内部元素似乎没有扩展，当我点击它们时，外部得到display:none 。 If someone could explain their answer if they have one, I have been doing this for 2 days, and I'm getting tired of it very much.如果有人可以解释他们的答案，如果他们有的话，我已经这样做了 2 天，我已经厌倦了。 I have put the accordion inside of an outer accordion to have same class, and I loop them from the JS file, but it just seems pointless at this point I think, I lost 2 days on this task :(我已将手风琴放在外部手风琴内以具有相同的类，并从 JS 文件中循环它们，但在这一点上我认为这似乎毫无意义，我在这项任务上浪费了 2 天:(
const accordionItem = document.getElementsByClassName("accordion--item"); const accordionContent = document.getElementsByClassName("accordion__content"); const accordionNested = document.getElementsByClassName("accordion--nested"); for (let i = 0; i < accordionItem.length; i++) { accordionItem[i].addEventListener("click", (e) => { accordionItem[i].classList.add("accordion--open"); accordionContent[i].style.display = "block"; e.stopPropagation(); for (let j = 0; j < accordionItem.length; j++) { if (j != i) { accordionContent[j].style.display = "none"; accordionItem[j].classList.remove("accordion--open"); } } }); }
/** * Required CSS */ .accordion__title { cursor: pointer; margin: 0; position: relative; } .accordion__icon { position: absolute; top: 50%; right: 24px; transform: translateY(-50%); } .accordion__icon .line-01, .accordion__icon .line-02 { position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; background-color: #272343; transition: 0.3s; } .accordion__icon .line-02 { transform: rotate(90deg); } .accordion__content { display: none; } .accordion--open > .accordion__title .line-02 { transform: rotate(0deg); } /* end Required CSS */ /** * Now let's make it look pretty! */ body { font-family: "Rubik", sans-serif; max-width: 768px; margin: 0 auto; padding: 40px 5%; color: #111; overflow-y: scroll; } h1 { text-align: center; margin: 0 0 40px; } .accordion { margin-top: -1px; border-top: 1px solid #272343; border-bottom: 1px solid #272343; } .accordion__title { padding: 20px 16px; font-size: 16px; transition: 0.2s; } .accordion__content { padding: 24px 16px; } .accordion__content p { margin: 0 0 16px; } .accordion__title:hover { background-color: #433d6f; color: #fff; } .accordion__title:hover .line-01, .accordion__title:hover .line-02 { background-color: #fff; } .accordion--open > .accordion__title { background-color: #272343; color: #fff; } .accordion--open > .accordion__title .line-01, .accordion--open > .accordion__title .line-02 { background-color: #fff; } .accordion--nested .accordion__title { padding: 16px; font-size: 14px; } .accordion--nested .accordion__content { padding: 24px 16px 16px; } .slideUp { height: 0; } .slideDown { height: 200px; }
<!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> <link rel="stylesheet" href="./css/nested.css"> </head> <body> <h1>JS accordion</h1> <div class="accordion"> <div class="accordion--item"> <h4 class="accordion__title"> Accordion Title 01 <i class="accordion__icon"> <div class="line-01"></div> <div class="line-02"></div> </i> </h4><!-- end .accordion__title --> <div class="accordion__content"> <div class="accordion--item accordion--nested"> <h4 class="accordion__title"> Accordion Nested Title 01 <i class="accordion__icon"> <div class="line-01"></div> <div class="line-02"></div> </i> </h4><!-- end .accordion__title --> <div class="accordion__content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.</p> <p>Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> </div><!-- end .accordion__content --> </div><!-- end .accordion nested 01 --> <div class="accordion--item accordion--nested"> <h4 class="accordion__title"> Accordion Nested Title 02 <i class="accordion__icon"> <div class="line-01"></div> <div class="line-02"></div> </i> </h4><!-- end .accordion__title --> <div class="accordion__content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.</p> <p>Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> </div><!-- end .accordion__content --> </div><!-- end .accordion nested 02 --> </div><!-- end .accordion__content --> </div><!-- end .accordion 01 --> <div class="accordion--item"> <h4 class="accordion__title"> Accordion Title 02 <i class="accordion__icon"> <div class="line-01"></div> <div class="line-02"></div> </i> </h4><!-- end .accordion__title --> <div class="accordion__content"> <div class="accordion--item accordion--nested"> <h4 class="accordion__title"> Accordion Nested Title 01 <i class="accordion__icon"> <div class="line-01"></div> <div class="line-02"></div> </i> </h4><!-- end .accordion__title --> <div class="accordion__content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.</p> <p>Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> </div><!-- end .accordion__content --> </div><!-- end .accordion nested 01 --> <div class="accordion--item accordion--nested"> <h4 class="accordion__title"> Accordion Nested Title 02 <i class="accordion__icon"> <div class="line-01"></div> <div class="line-02"></div> </i> </h4><!-- end .accordion__title --> <div class="accordion__content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.</p> <p>Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> </div><!-- end .accordion__content --> </div><!-- end .accordion nested 02 --> </div><!-- end .accordion__content --> </div><!-- end .accordion 02 --> <div class="accordion--item"> <h4 class="accordion__title"> Accordion Title 03 <i class="accordion__icon"> <div class="line-01"></div> <div class="line-02"></div> </i> </h4><!-- end .accordion__title --> <div class="accordion__content"> <div class="accordion--item accordion--nested"> <h4 class="accordion__title"> Accordion Nested Title 01 <i class="accordion__icon"> <div class="line-01"></div> <div class="line-02"></div> </i> </h4><!-- end .accordion__title --> <div class="accordion__content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.</p> <p>Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> </div><!-- end .accordion__content --> </div><!-- end .accordion nested 01 --> <div class="accordion--item accordion--nested"> <h4 class="accordion__title"> Accordion Nested Title 02 <i class="accordion__icon"> <div class="line-01"></div> <div class="line-02"></div> </i> </h4><!-- end .accordion__title --> <div class="accordion__content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.</p> <p>Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> </div><!-- end .accordion__content --> </div><!-- end .accordion nested 02 --> </div><!-- end .accordion__content --> </div><!-- end .accordion 03 --> </div> </body> <script src="./nested.js"></script> </html>
1 个解决方案
解决方案1
1 已采纳 2022-06-17 23:57:29
You need to put code to open parent accordion itens.您需要输入代码来打开父手风琴itens。 See the code between // BEGIN: Open parent accordion and // END: Open parent accordion请参阅// BEGIN: Open parent accordion和// END: Open parent accordion之间的代码
const accordionItem = document.getElementsByClassName("accordion--item"); const accordionContent = document.getElementsByClassName("accordion__content"); const accordionNested = document.getElementsByClassName("accordion--nested"); for (let i = 0; i < accordionItem.length; i++) { accordionItem[i].addEventListener("click", (e) => { accordionItem[i].classList.add("accordion--open"); accordionContent[i].style.display = "block"; e.stopPropagation(); for (let j = 0; j < accordionItem.length; j++) { if (j != i) { accordionContent[j].style.display = "none"; accordionItem[j].classList.remove("accordion--open"); } } // BEGIN: Open parent accordion let recursiveNode = accordionItem[i]; while( (recursiveNode = recursiveNode.parentNode) ){ if (recursiveNode.classList && recursiveNode.classList.contains('accordion--item')) { recursiveNode.classList.add("accordion--open"); let recursiveNodeChildren = recursiveNode.childNodes; for(let j = 0; j < recursiveNodeChildren.length; j++) { let childNode = recursiveNodeChildren[j]; if (childNode.classList && childNode.classList.contains('accordion__content')) { childNode.style.display = "block"; break; } } } } // END: Open parent accordion }); }
/** * Required CSS */ .accordion__title { cursor: pointer; margin: 0; position: relative; } .accordion__icon { position: absolute; top: 50%; right: 24px; transform: translateY(-50%); } .accordion__icon .line-01, .accordion__icon .line-02 { position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; background-color: #272343; transition: 0.3s; } .accordion__icon .line-02 { transform: rotate(90deg); } .accordion__content { display: none; } .accordion--open > .accordion__title .line-02 { transform: rotate(0deg); } /* end Required CSS */ /** * Now let's make it look pretty! */ body { font-family: "Rubik", sans-serif; max-width: 768px; margin: 0 auto; padding: 40px 5%; color: #111; overflow-y: scroll; } h1 { text-align: center; margin: 0 0 40px; } .accordion { margin-top: -1px; border-top: 1px solid #272343; border-bottom: 1px solid #272343; } .accordion__title { padding: 20px 16px; font-size: 16px; transition: 0.2s; } .accordion__content { padding: 24px 16px; } .accordion__content p { margin: 0 0 16px; } .accordion__title:hover { background-color: #433d6f; color: #fff; } .accordion__title:hover .line-01, .accordion__title:hover .line-02 { background-color: #fff; } .accordion--open > .accordion__title { background-color: #272343; color: #fff; } .accordion--open > .accordion__title .line-01, .accordion--open > .accordion__title .line-02 { background-color: #fff; } .accordion--nested .accordion__title { padding: 16px; font-size: 14px; } .accordion--nested .accordion__content { padding: 24px 16px 16px; } .slideUp { height: 0; } .slideDown { height: 200px; }
<!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> <link rel="stylesheet" href="./css/nested.css"> </head> <body> <h1>JS accordion</h1> <div class="accordion"> <div class="accordion--item"> <h4 class="accordion__title"> Accordion Title 01 <i class="accordion__icon"> <div class="line-01"></div> <div class="line-02"></div> </i> </h4><!-- end .accordion__title --> <div class="accordion__content"> <div class="accordion--item accordion--nested"> <h4 class="accordion__title"> Accordion Nested Title 01 <i class="accordion__icon"> <div class="line-01"></div> <div class="line-02"></div> </i> </h4><!-- end .accordion__title --> <div class="accordion__content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.</p> <p>Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> </div><!-- end .accordion__content --> </div><!-- end .accordion nested 01 --> <div class="accordion--item accordion--nested"> <h4 class="accordion__title"> Accordion Nested Title 02 <i class="accordion__icon"> <div class="line-01"></div> <div class="line-02"></div> </i> </h4><!-- end .accordion__title --> <div class="accordion__content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.</p> <p>Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> </div><!-- end .accordion__content --> </div><!-- end .accordion nested 02 --> </div><!-- end .accordion__content --> </div><!-- end .accordion 01 --> <div class="accordion--item"> <h4 class="accordion__title"> Accordion Title 02 <i class="accordion__icon"> <div class="line-01"></div> <div class="line-02"></div> </i> </h4><!-- end .accordion__title --> <div class="accordion__content"> <div class="accordion--item accordion--nested"> <h4 class="accordion__title"> Accordion Nested Title 01 <i class="accordion__icon"> <div class="line-01"></div> <div class="line-02"></div> </i> </h4><!-- end .accordion__title --> <div class="accordion__content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.</p> <p>Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> </div><!-- end .accordion__content --> </div><!-- end .accordion nested 01 --> <div class="accordion--item accordion--nested"> <h4 class="accordion__title"> Accordion Nested Title 02 <i class="accordion__icon"> <div class="line-01"></div> <div class="line-02"></div> </i> </h4><!-- end .accordion__title --> <div class="accordion__content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.</p> <p>Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> </div><!-- end .accordion__content --> </div><!-- end .accordion nested 02 --> </div><!-- end .accordion__content --> </div><!-- end .accordion 02 --> <div class="accordion--item"> <h4 class="accordion__title"> Accordion Title 03 <i class="accordion__icon"> <div class="line-01"></div> <div class="line-02"></div> </i> </h4><!-- end .accordion__title --> <div class="accordion__content"> <div class="accordion--item accordion--nested"> <h4 class="accordion__title"> Accordion Nested Title 01 <i class="accordion__icon"> <div class="line-01"></div> <div class="line-02"></div> </i> </h4><!-- end .accordion__title --> <div class="accordion__content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.</p> <p>Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> </div><!-- end .accordion__content --> </div><!-- end .accordion nested 01 --> <div class="accordion--item accordion--nested"> <h4 class="accordion__title"> Accordion Nested Title 02 <i class="accordion__icon"> <div class="line-01"></div> <div class="line-02"></div> </i> </h4><!-- end .accordion__title --> <div class="accordion__content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.</p> <p>Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> </div><!-- end .accordion__content --> </div><!-- end .accordion nested 02 --> </div><!-- end .accordion__content --> </div><!-- end .accordion 03 --> </div> </body> <script src="./nested.js"></script> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
嵌套手风琴所需的jquery_accordion.js代码 - jquery_accordion.js code needed for nested accordions
JQuery UI手风琴-嵌套手风琴没有动画 - JQuery UI Accordion - Nested Accordions not animated
如何制作嵌套的可折叠JS手风琴？ - How do I make nested collapsible JS accordion?
我可以为多个JQuery手风琴使用一个Javascript函数吗？ - Can I have one Javascript function for multiple JQuery accordions?
使Jquery Accordion脚本在一页上允许多个手风琴 - Make Jquery Accordion script to allow multiple accordions on one page
JS手风琴未打开 - JS accordions not opening
使用 jquery 制作嵌套手风琴 - Make nested accordion with jquery
我无法让 inputmask 与 vanilla JS 一起使用 - I cant make inputmask to work with vanilla JS
我有代码并基于该代码我需要解决问题 - JS - I have code and based on that code I need to solve problem - JS
将内部手风琴制作成空的手风琴 - Creating inner-accordions into an empty accordion
相关标签