如何在不回發的情況下運行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>