JavaScript 滑動側邊欄菜單

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 代碼中，您檢查按鈕的內部 HTML 是否為：

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

但是 Fontawesome 為您的<I>元素添加了一個新屬性。 所以現在它的內部 HTML 是：

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

我建議在 js 中使用變量或類似的東西來檢查/保存您的菜單是否打開。 你的方式很容易導致更多的錯誤。

此外，為了獲得更好的性能，如果可能的話，我建議使用 Transform 而不是 margin 來制作動畫。

JavaScript 滑動側邊欄菜單

問題描述

1 個解決方案

解決方案1
0 2019-09-26 13:24:28

JavaScript 滑動側邊欄菜單

問題描述

1 個解決方案

解決方案1 0 2019-09-26 13:24:28

解決方案1
0 2019-09-26 13:24:28