时间戳

首页 > 解决方案 > 单击时向下和向上滑动菜单项

javascript - 单击时向下和向上滑动菜单项

问题描述

所以我创建了这个汉堡菜单：

function menuToggle() {
    var x = document.getElementById("burgerMenu");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
:root {
    /* Static Colors*/
    --clr-heading-footer: #4C5BA0;
    --clr-button: #4C5BA0;
    --clr-nav-color: #8D90A1;
    /* Dark Theme */
    --clr-bg-dark: #2F2F35;
    --clr-card-bg-dark: #3A3B41;
    --clr-card-body-text-dark: #8D90A1;
    --clr-card-title-text-dark: #D3D3D9;
    --clr-nav-activ-color-dark: #D3D3D9;
    --clr-nav-hover-color-dark: #D3D3D9;
    /* (Default) Light Theme */
    --clr-bg-light: #E1E1E1;
    --clr-nav-activ-color-light: #3A3B41;
    --clr-nav-hover-color-light: #3A3B41;
    /* (Default) Set Colors */
    --foreground: var(--clr-bg-dark);
    --background: var(--clr-bg-light);
    --activ-mode-icon: var(--light-sun);
    --activ-hover-mode-icon: var(--light-hover-sun);
    --selected-nav-page: var(--clr-nav-activ-color-light);
    --hover-nav: var(--clr-nav-hover-color-light);
    /* (Default) Page Settings */
    height: 100%;
    font-family: 'Montserrat';
    padding: 0% 12%;
}


body {
    background: var(--background);
    color: var(--foreground);
}

.logo-style {
    /* Logo Style */
    font-style: normal;
    font-weight: bold;
    font-size: 2rem;
    line-height: 2.438rem;
    letter-spacing: 0.05em;
    color: #4C5BA0;
}


/*
    Navigation
*/

.topnav {
    overflow: hidden;
    background: none !important;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.topnav button {
    border: none;
    cursor: pointer;
}

.topnav a {
    color: var(--clr-nav-color);
    text-align: center;
    padding: 0.09rem 0.30rem;
    text-decoration: none;
    font-size: 1.063rem;
}

.topnav a:hover {
    color: var(--hover-nav);
}

.topnav a.active {
    color: var(--selected-nav-page);
}

.right-nav {
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
    align-items: center;
}

.topnav-menu {
    /* Burger Menu Content*/
    width: 100%;
    overflow: hidden;
    padding: 0.09rem 0.30rem;
    background-color: darkblue;
}

.topnav-menu ul {
    /* Burger Menu Content*/
    float: right;
    list-style-type: none;
}

.topnav-menu a {
    color: var(--clr-nav-color);
    text-align: center;
    padding: 0.09rem 0.30rem;
    text-decoration: none;
    font-size: 1.063rem;
}

.topnav-menu a:hover {
    color: var(--hover-nav);
}

.topnav-menu a.active {
    color: var(--selected-nav-page);
}


/*
    Navigation Burger Menu
*/

.line-one {
    width: 1.875rem;
}

.line-two {
    width: 1.875rem;
}

.line-three {
    width: 1.875rem;
}

.burger-menu div {
    width: 1.875rem;
    height: 0.25rem;
    background-color: var(--clr-nav-color);
    margin: 0.313rem 0;
    border-radius: 1.563rem;
}

.burger-menu {
    width: 1.875rem;
}

.burger-menu:hover div {
    width: 1.875rem;
    background-color: var(--hover-nav);
}
<div class="topnav">
    <div class="left-nav">
        <a href="#home"><p class="logo-style">Metrics</p></a>
    </div>
    <div class="right-nav">
        <a href="#home" class="active">Home</a>
        <a href="#archives">Archives</a>
        <a href="#coverage">Coverage</a>
        <button type="button" class="dark-mode-toggle disp_mode nav-icon" id="dark-mode-toggle"></button>
        <a href="#burger-menu" class="burger-menu" onclick="menuToggle()">
            <div class="line-one"></div>
            <div class="line-two"></div>
            <div class="line-three"></div>
        </a>
    </div>
</div>
<!-- Burger Menu Hidden By Default Untill menuToggle() is activated -->
<div class="topnav-menu" id="burgerMenu" style="display: none;">
    <ul>
        <li><a href="#item1">item1</a></li>
        <li><a href="#item2">item2</a></li>
        <li><a href="#item3">item3</a></li>
    </ul>
</div>

我想要做的是制作这个汉堡菜单<ul>项，像这段代码一样slideDown，它也应该在第二次点击时向上滑动。

document.getElementById("button").addEventListener("click", function () {
    document.getElementById("wrapper").style.height = "240px";
});
#wrapper {
    transition:height 1s ease-out;
    height:0;
    overflow:hidden;
}
.slideMeDown {
    font-size:24px;
    background: #4679bd;
    color:white;
    width:50%;
    height:200px;
    padding:20px;
}
<button id="button">Click to slideDown!</button>
<div id="wrapper">
    <div class="slideMeDown">cool!</div>
</div>

如何做到这一点？当我尝试将这两个代码合并在一起时，我似乎无法使其工作？而且我不知道如何让它向上滑动，或者它只是ease-in？

标签： javascripthtmlcss

解决方案

您需要切换元素的高度而不是displaycss 属性。如果从 切换display: block;到display: none;，则无法使用该transition属性，因为它只是从可见切换到不可见。

您的第二个片段背后的逻辑是该div元素永远不会隐藏，而是它们使用元素的高度。当元素height相等0时，它会产生一种错觉，即它已经消失但实际上并没有。

当您切换高度时，您可以向 JS 所做的更改添加过渡。

注意： overflow: hidden;必须隐藏元素内部的内容。如果你不使用它，那么里面的文本会溢出div元素。

尝试并查看以下建议的修复

function menuToggle() {
    var list = document.getElementById("list");
    var listElements =  list.childElementCount; 
    var height = 30 * listElements;
    var x = document.getElementById("burgerMenu");
    if (x.style.height === "0px") {
        x.style.height = height + "px";
    } else {
        x.style.height = "0px";
    }
}
:root {
    /* Static Colors*/
    --clr-heading-footer: #4C5BA0;
    --clr-button: #4C5BA0;
    --clr-nav-color: #8D90A1;
    /* Dark Theme */
    --clr-bg-dark: #2F2F35;
    --clr-card-bg-dark: #3A3B41;
    --clr-card-body-text-dark: #8D90A1;
    --clr-card-title-text-dark: #D3D3D9;
    --clr-nav-activ-color-dark: #D3D3D9;
    --clr-nav-hover-color-dark: #D3D3D9;
    /* (Default) Light Theme */
    --clr-bg-light: #E1E1E1;
    --clr-nav-activ-color-light: #3A3B41;
    --clr-nav-hover-color-light: #3A3B41;
    /* (Default) Set Colors */
    --foreground: var(--clr-bg-dark);
    --background: var(--clr-bg-light);
    --activ-mode-icon: var(--light-sun);
    --activ-hover-mode-icon: var(--light-hover-sun);
    --selected-nav-page: var(--clr-nav-activ-color-light);
    --hover-nav: var(--clr-nav-hover-color-light);
    /* (Default) Page Settings */
    height: 100%;
    font-family: 'Montserrat';
    padding: 0% 12%;
}


body {
    background: var(--background);
    color: var(--foreground);
}

.logo-style {
    /* Logo Style */
    font-style: normal;
    font-weight: bold;
    font-size: 2rem;
    line-height: 2.438rem;
    letter-spacing: 0.05em;
    color: #4C5BA0;
}


/*
    Navigation
*/

.topnav {
    overflow: hidden;
    background: none !important;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.topnav button {
    border: none;
    cursor: pointer;
}

.topnav a {
    color: var(--clr-nav-color);
    text-align: center;
    padding: 0.09rem 0.30rem;
    text-decoration: none;
    font-size: 1.063rem;
}

.topnav a:hover {
    color: var(--hover-nav);
}

.topnav a.active {
    color: var(--selected-nav-page);
}

.right-nav {
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
    align-items: center;
}

.topnav-menu {
    /* Burger Menu Content*/
    width: 100%;
    overflow: hidden;
    transition: 1000ms;
    background-color: darkblue;
}

.topnav-menu ul {
    /* Burger Menu Content*/
    float: right;
    list-style-type: none;
}

.topnav-menu a {
    color: var(--clr-nav-color);
    text-align: center;
    padding: 0.09rem 0.30rem;
    text-decoration: none;
    font-size: 1.063rem;
}

.topnav-menu a:hover {
    color: var(--hover-nav);
}

.topnav-menu a.active {
    color: var(--selected-nav-page);
}


/*
    Navigation Burger Menu
*/

.line-one {
    width: 1.875rem;
}

.line-two {
    width: 1.875rem;
}

.line-three {
    width: 1.875rem;
}

.burger-menu div {
    width: 1.875rem;
    height: 0.25rem;
    background-color: var(--clr-nav-color);
    margin: 0.313rem 0;
    border-radius: 1.563rem;
}

.burger-menu {
    width: 1.875rem;
}

.burger-menu:hover div {
    width: 1.875rem;
    background-color: var(--hover-nav);
}
<div class="topnav">
    <div class="left-nav">
        <a href="#home"><p class="logo-style">Metrics</p></a>
    </div>
    <div class="right-nav">
        <a href="#home" class="active">Home</a>
        <a href="#archives">Archives</a>
        <a href="#coverage">Coverage</a>
        <button type="button" class="dark-mode-toggle disp_mode nav-icon" id="dark-mode-toggle"></button>
        <a href="#burger-menu" class="burger-menu" onclick="menuToggle()">
            <div class="line-one"></div>
            <div class="line-two"></div>
            <div class="line-three"></div>
        </a>
    </div>
</div>
<!-- Burger Menu Hidden By Default Untill menuToggle() is activated -->
<div class="topnav-menu" id="burgerMenu" style="height:0px;">
  <div style="padding-right:5px">
    <ul id="list">
        <li><a href="#item1">item1</a></li>
        <li><a href="#item2">item2</a></li>
        <li><a href="#item3">item3</a></li>
    </ul>
  </div>
</div>

推荐阅读