更改表单中 div 的高度时，如何防止滚动到页面顶部？

Question

我有一个带有复选框输入的表单，它们遵循一定的层次结构。我正在尝试这样做，以便单击类别输入旁边的按钮在显示和隐藏其子类别的输入之间切换。切换本身工作得很好，但它会触发滚动到页面顶部。当我注释掉表单标签时，切换可以完美地工作而无需滚动。

供参考，这是我的html

function showSubcategories(show_button) {
    let category_div = show_button.parentNode;
    let subcategories_divs = category_div.querySelectorAll('.subcategory');
    for (var i=0; i<subcategories_divs.length; i++) {
        subcategories_divs[i].style.height = "32px";
    }
    show_button.style.display = "none";
    category_div.querySelector('.hide-button').style.display = "inline-block";
}

function hideSubcategories(hide_button) {
    let category_div = hide_button.parentNode;
    let subcategories_divs = category_div.querySelectorAll('.subcategory');
    for (var i=0; i<subcategories_divs.length; i++) {
        subcategories_divs[i].style.height = "0px";
    }
    hide_button.style.display = "none";
    category_div.querySelector('.show-button').style.display = "inline-block";
}

.subcategory {
    padding-left: 20px;
    overflow: hidden;
    height: 0;
    transition: 1s;
}

<form>
    <div>
        <input type="checkbox" value="category">
        <label for="category">category</label>
        <button class="show-button" onclick="showSubcategories(this)">&#8744</button>
        <button class="hide-button" onclick="hideSubcategories(this)">&#8743</button>
        <div class="subcategory">
            <input type="checkbox" value="subcategory1">
            <label for="subcategory1">subcategory1</label>    
        </div>
        <div class="subcategory">
            <input type="checkbox" value="subcategory2">
            <label for="subcategory2">subcategory2</label>    
        </div>
    </div>
</form>

我正在分别更改每个单独的子类别输入的高度，因为每个类别都有可变数量的子类别。我尝试将所有子类别放在一个 div 中并更改该 div 的高度，但我遇到了同样的问题。有什么想法吗？

Answer 1

按钮的默认类型是提交：

type = submit|button|reset [CI]

此属性声明按钮的类型。可能的值：

submit：创建一个提交按钮。 这是默认值。

https://www.w3.org/TR/html401/interact/forms.html#h-17.5

因此您必须使用event.preventDefault() 来取消提交，或者为按钮指定type="button"。

function showSubcategories(show_button) {
    show_button.parentNode.classList.toggle("open", true);
}

function hideSubcategories(hide_button) {
    hide_button.parentNode.classList.toggle("open", false);
}

.subcategory {
    padding-left: 20px;
    overflow: hidden;
    height: 0;
    transition: 1s;
}
div.menu:not(.open) > .hide-button,
div.menu.open > .show-button
{
  display: none;
}
div.menu.open > .subcategory
{
  height: 32px;
}

<form>
    <div class="menu">
        <input type="checkbox" value="category">
        <label for="category">category</label>
        <button class="show-button" type="button" onclick="showSubcategories(this)">&#8744</button>
        <button class="hide-button" type="button" onclick="hideSubcategories(this)">&#8743</button>
        <div class="subcategory">
            <input type="checkbox" value="subcategory1">
            <label for="subcategory1">subcategory1</label>    
        </div>
        <div class="subcategory">
            <input type="checkbox" value="subcategory2">
            <label for="subcategory2">subcategory2</label>    
        </div>
    </div>
</form>