如何在不回发的情况下运行Jscript

Question

我想这里描述的W3C学校建立一个“手风琴”式的可折叠DIV到我的网页... 手风琴描述

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

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

该代码似乎可以正常工作，当我单击“手风琴”元素时，它会展开-但随后似乎会回发，而手风琴又崩溃了，并且不会显示。

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

这与div中的ASP表有关系吗？

Answer 1

HTML button的默认行为是单击时提交表单（其类型默认为submit ）。 您需要做的就是向元素添加type="button"属性，如下所示：

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

那应该可以解决问题-它表示该按钮只是一个简单的可单击按钮，无需任何特殊操作。

这个答案也涵盖了它： <button>与<input type =“ button” />。 使用哪个？

Answer 2

有两种方法，

1. 默认情况下，按钮行为类似于“提交”按钮，因此会发生回发。 如果要防止回发，可以使用以下代码。

   <button class="accordion" onclick="return false;">Section 1</button>

2. 您可以使用type属性来防止提交行为。

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