在表单中更改 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>

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

Answer 1

按钮的默认类型是提交：

type = submit|button|reset [CI]

This attribute declares the type of the button. Possible values:

submit: Creates a submit button. This is the default value.

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>

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

How can I prevent scrolling to top of page when changing the height of a div within a form?

html

javascript

css

forms

height