时间戳

首页 > 解决方案 > CSS转换翻译不适用于javascript

javascript - CSS转换翻译不适用于javascript

问题描述

const openBtn = document.querySelector('.open')
const closeBtn = document.querySelector('.close')
const navContainer = document.querySelector('.nav-container')

openBtn.addEventListener('click', () => {
    openBtn.classList.add('hide')
    closeBtn.classList.remove('hide')
    navContainer.classList.remove('.show-nav')
})

closeBtn.addEventListener('click', () => {
    closeBtn.classList.add('hide')
    openBtn.classList.remove('hide')
    navContainer.classList.add('.show-nav')
})
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: 0;
    font-family: 'Roboto', sans-serif;
}
a{
    text-decoration: none;
    color: black;
}
li{
    list-style: none;
}
.nav-btn{
    position: absolute;
    right: 0%;
    border: none;
    background: transparent;
    margin: 10px;
    cursor: pointer;
}
.hide{
    display: none;
}
body{
    overflow: hidden;
}
.nav-container{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    transform: translateX(-100%);
    transition: all 0.2s ease;
}
.show-nav{
    transform: translateX(0%);
}
h1{
    margin: 10px;
    font-size: 40px;
}
h1 span{
    color: cornflowerblue;
}
.links{
    margin: 10px;
    margin-left: 24px;
    font-size: 32px;
}
.links a{
    line-height: 48px;
}
.social{
    display: flex;
    flex-direction: row;
    position: absolute;
    bottom: 0%;
    margin-bottom: 10px;
}
.social a{
    margin-right: 6px;
    margin-left: 24px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <script defer src="main.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <button class="nav-btn open">
        <i class="fas fa-bars fa-3x"></i>
    </button>
    <button class="nav-btn close hide">
        <i class="fas fa-times fa-3x"></i>
    </button>
    <nav class="nav-container">
        <h1>
            Side
            <span>
                Bar
            </span>
        </h1>
        <ul class="links">
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">Projects</a>
            </li>
            <li>
                <a href="#">Contacts</a>
            </li>
        </ul>
        <ul class="social">
            <li>
                <a href="#">
                    <i class="fab fa-twitter fa-lg"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fab fa-youtube fa-lg"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fab fa-github fa-lg"></i>
                </a>
            </li>
        </ul>
    </nav>
</body>
</html>

我试图用 html css 和 javascript 制作一个侧边栏。我遇到了侧边栏没有出现的问题。我希望通过添加一个“.show-nav”类来使侧边栏出现，该类将“.nav-container”转换转换回 0%。正在添加“.show-nav”类，但它包含的属性不会更新样式。

标签： javascripthtmlcss

解决方案

您的代码中有一些错误，例如navContainer.classList.remove('.show-nav')，请注意 remove 方法中的点。此外，您的 css 中存在一些不一致之处。

const openBtn = document.querySelector('.open')
const closeBtn = document.querySelector('.close')
const navContainer = document.querySelector('.nav-container')

openBtn.addEventListener('click', () => {
    openBtn.classList.add('hide')
    closeBtn.classList.remove('hide')
    navContainer.classList.add('show-nav')
})

closeBtn.addEventListener('click', () => {
    closeBtn.classList.add('hide')
    openBtn.classList.remove('hide')
    navContainer.classList.remove('show-nav')
})
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: 0;
    font-family: 'Roboto', sans-serif;
}
a{
    text-decoration: none;
    color: black;
}
li{
    list-style: none;
}
.nav-btn{
    position: absolute;
    right: 0%;
    border: none;
    background: transparent;
    margin: 10px;
    cursor: pointer;
}
.hide{
    display: none;
}
body{
    overflow: hidden;
}
.nav-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    height: 100vh;
    background: pink;
    transform: translateX(-100%);
    transition: all 0.2s ease;
}
.show-nav{
    transform: translateX(-10%);
}
h1{
    margin: 10px;
    font-size: 40px;
}
h1 span{
    color: cornflowerblue;
}
.links{
    margin: 10px;
    margin-left: 24px;
    font-size: 32px;
}
.links a{
    line-height: 48px;
}
.social{
    display: flex;
    flex-direction: row;
    position: absolute;
    bottom: 0%;
    margin-bottom: 10px;
}
.social a{
    margin-right: 6px;
    margin-left: 24px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <script defer src="main.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <button class="nav-btn open">
        <i class="fas fa-bars fa-3x"></i>
    </button>
    <button class="nav-btn close hide">
        <i class="fas fa-times fa-3x"></i>
    </button>
    <nav class="nav-container">
        <h1>
            Side
            <span>
                Bar
            </span>
        </h1>
        <ul class="links">
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">Projects</a>
            </li>
            <li>
                <a href="#">Contacts</a>
            </li>
        </ul>
        <ul class="social">
            <li>
                <a href="#">
                    <i class="fab fa-twitter fa-lg"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fab fa-youtube fa-lg"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fab fa-github fa-lg"></i>
                </a>
            </li>
        </ul>
    </nav>
</body>
</html>

推荐阅读