时间戳

首页 > 解决方案 > JS中的宽度改变但不可点击

javascript - JS中的宽度改变但不可点击

问题描述

所以我已经设置了我的 div 来扩展 href 点击。Href 在 div 之前，它正在执行我的 div 的 javascript 宽度从 48px 到 240px。所以一切正常，但是当宽度扩大并且我点击 div 扩大的区域时，它不会折叠。无法弄清楚如何解决它。在代码片段上似乎工作但在我的浏览器上不起作用（Firefox）。

function toggleNavbar() {
     
    var navbar = document.getElementById('navbar');

    var displaySetting = navbar.style.width;

    var navbarButton = document.getElementById('navbar_button');

    if (displaySetting == '240px') {
      navbar.style.width = '48px';
      document.getElementById('navigation').innerHTML = "<i class='fas fa-bars'></i>";
    }
    else {
      navbar.style.width = '240px';
      document.getElementById('navigation').innerHTML = "<i class='fas fa-bars'></i> Navigation";
    }
  }
#navbar {
    position: relative;
    width: 48px;
    height: 100%;
    padding: 20px 0;
    overflow: hidden;
}

#navbar a {
    text-decoration: none;
    display: block;
}

#navbar .navbar_item {
    background-color: rgb(165, 23, 69);
    border: none;
    color: white;
    text-decoration: none;
    font-size: 16px;
    padding: 10px 10px;
}

#navbar .navbar_item i {
    width: 30px;
    padding: 0 5px;
}
<script src="https://kit.fontawesome.com/7204bf25d6.js"></script>
<div id="navbar">
    <a href="#" id="navbar_button" onclick="toggleNavbar()">
        <div class="navbar_item" id="navigation">
            <i class="fas fa-bars"></i>
        </div>
    </a>
</div>

标签： javascripthtmljquerycss

解决方案

问题已解决。

我还没有将 jQuery 添加到我的文档中。添加后问题已解决。

感谢@ikiK 提供有关检查代码的一些建议。

推荐阅读