ASP.NET网站中Accordion折叠面板点击后立即收起的问题求助
ASP.NET网站中Accordion折叠面板点击后立即收起的问题求助
我正在尝试制作一个可折叠菜单,已经根据现有代码修改适配了自己的需求。这段代码直接打开HTML文件,或者放到普通网站上运行时,表现都完全符合预期。但当我把它用到供应商提供的ASP.NET应用里时,就出现了问题:4个主标题能正常显示,可点击其中一个标题后,对应的内容只会显示约一秒钟,然后立刻自动收起了。
有没有人能帮我解释下这种情况为什么会发生,或者给我一些排查问题的思路呢?以下是我用到的代码:
JavaScript代码
var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); }
CSS代码
body { font-family: sans-serif; } .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .accordion:After { content: '\002B'; color: #777; font-weight: bold; float: right; margin-left: 5px; } .active:after { content: "\2212"; } .panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }
HTML代码
<h2>Accordion with symbols</h2> <p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p> <button class="accordion">Section 1</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 2</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 3</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div>
备注:内容来源于stack exchange,提问作者DMAC
相关产品推荐
相关产品推荐

