Question

我正在尝试使用HTML CSS过渡和标准JavaScript在右侧创建此侧边栏菜单，并且还导入了一些FontAwesome图标。

我的代码如下（JavaScript代码位于HTML文档中）

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sidebar Menu</title>
    <script src="https://kit.fontawesome.com/b1956a1c85.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="sidebar">
        <ul>
           <li><a href="#"><i class="fas fa-home"></i></a></li> 
           <li><a href="#"><i class="fas fa-user"></i></a></li> 
           <li><a href="#"><i class="fas fa-cogs"></i></a></li> 
           <li><a href="#"><i class="fas fa-wrench"></i></a></li>
           <li><a href="#"><i class="fas fa-tools"></i></a></li>
           <li><a href="#"><i class="fas fa-lock"></i></a></li> 
        </ul>
    </div>

<a href="#" class="button"><i class="fas fa-bars"></i></a>

<script> 

    let btn = document.querySelector('.button'), 
    side = document.querySelector('.sidebar');

    btn.addEventListener('click', function() {
        if(btn.innerHTML === '<i class="fas fa-bars"></i>') {
            btn.innerHTML = '<i class="fas fa-times"></i>';
            side.style.marginLeft = '0px';
        } else if (btn.innerHTML === '<i class = "fas fa-times"></i>') {
            btn.innerHTML = '<i class= "fas fa-bars"></i>';
            side.style.marginLeft = '-25px';
        }
    });

    </script>
    </body>
    </html>

我的CSS页面如下：

    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #af8f36;
}

.sidebar {
    float: left;
    width: 120px;
    height: 100vh;
    background: #6e36af;
    overflow: hidden;
    margin-left: -125px;
    transition: 0.5s;

}

.sidebar ul {
    list-style: none;
}

.sidebar ul li a {
    text-decoration: none;
    color: #fff;
    height: 100px;
    width: 100%;
    font-size: 40px;
    line-height: 100px;
    display: block;
    text-align: center;
    transition: 0.5s;
}

.sidebar ul li a:hover {
    background: #5d2e94;
}

.button {
    float: left;
    padding: 27px 20px;
    font-size: 40px;
    text-decoration: none;
    color: #333;
}

由于某种原因，当我单击“汉堡包”按钮时，侧栏不会向右滑动。有人可以向我解释原因吗？我的JavaScript代码正确吗？

Answer 1

我发现了您的问题：在您的JS代码中，检查Button的内部HTML是否为：

<i class="fas fa-bars"></I>

但是Fontawesome向您的<I>元素添加了新属性。所以现在它的内部HTML是：

<i class="fas fa-bars" aria-hidden="true"></I>

我建议在js中使用变量或类似的方法来检查/保存菜单是否打开。您的方式很容易导致更多错误。

此外，为了获得更好的性能，我建议尽可能使用“不使用变换”的动画。

JavaScript滑动侧栏菜单

1 个答案: