javascript - 如何在没有回发的情况下运行 Jscript

Question

我正在尝试在我的网页中构建一个“ Accordion ”样式的可折叠 div，如 w3c 学校此处所述... accordion description

我已经完成了大部分工作 - 我的代码是这样的:

ASP:

<div class="col-md-4">
        <button class="accordion">Section 1</button>
        <div class="content">
            <asp:Table ID="Consumable_table" runat="server">
                <asp:TableHeaderRow>
                    <asp:TableHeaderCell>
                    <h2>
                        <u>Consumable Stock</u>
                    </h2>
                    </asp:TableHeaderCell>
                </asp:TableHeaderRow>
            </asp:Table>
        </div>
    </div>

CSS:

.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;}

.content {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;}

我添加了以下 Jscript:

$(document).ready(function () {
        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";
                }

                return false;
            });
        }
    });

代码似乎工作正常，当我单击“ Accordion ”元素时，它会展开 - 但随后它似乎会回发，并且 Accordion 再次折叠并且不显示。

我的问题是如何让它展开并保持展开状态，如教程中所述。我在这里和各个网站上看到了许多答案，表明“返回 false”可能就足够了。

这与div内的ASP表有什么关系吗？

Answer 1

HTML 按钮的默认行为是单击时提交表单(默认情况下其类型为submit)。您需要做的就是向元素添加 type="button" 属性，如下所示:

<button class="accordion" type="button">Section 1</button>

这应该可以解决问题 - 它表明该按钮只是一个简单的可点击按钮，没有任何特殊操作。

这个答案也涵盖了它:<button> vs. <input type="button" />. Which to use?