Javascript 为什么不显示CSS转换？

我正试图通过点击主菜单中的导航按钮，使导航面板滑入。不用说，它不起作用了。我以前做过这项工作，所以我不知道发生了什么。帮忙

HTML

<!-- Header -->
<div class="header">
  <a href="#"><i id="nav-button" class="fa fa-navicon"></i></a>
  <header class="logo">
    <a href="index.html"><img src="../Assets/images/logo.png" alt=""></a>
  </header>
  <a href="#"><i class="account-control fa fa-user"></i></a>
</div>

<div class="wrapper">
  <div id="content">
  </div>

  <!-- Collapsible Menu -->
  <div id="sidebar">
    <div class="nav-items">
      <nav class="mainmenu">
        <ul>
          <li><a href="#">Billing</a></li>
          <li><a href="#">Support</a></li>
          <li><a href="#">Servers</a></li>
          <li><a href="#">Settings</a></li>
          <li><a href="#">Reports</a></li>
        </ul>
      </nav>
    </div>

    <!-- Copyright -->
    <footer>
      <form action="" class="search">
        <input type="search" name="search" placeholder="Search">
      </form>
      <p class="copyright">asdf</p>
    </footer>
  </div>
</div>

JavaScript

jQuery(document).ready(function($) {
  /* Sidebar */
  $('#nav-button, #content').click(function() {
    $('#nav-button').toggleClass('open');
    $('body').toggleClass('sidebar-open');
    return false;
  });
});(jQuery);

---

是的，我正在使用Fontsome.：）

您是否尝试清空缓存？ Ctrl-Shift-Del，以便浏览器重新加载css

注意：如果您的用户发生这种情况，请尝试在标题中更改指向css的链接，如下所示：

---

解决原始问题的最大问题在于

溢出：隐藏在
.wrapper
上

在这里它被删除：。但这开启了一个全新的问题世界。我建议您回去重构代码。
在转换方面对我来说很好（需要添加文本才能看到元素）。当我点击导航时，我可以看到内容向右移动。我猜你的实际问题似乎是导航面板的显示，对吧？是的，这就是问题所在。我将导航面板的背景设置为#2222222（几乎为黑色），以便我可以看到它何时弹出。然而，它从来没有显示。现在，我将文本添加到内容区域，我看到它在上面滑动，但是导航面板仍然没有显示。我甚至将导航面板的Z-Index改为在内容上方，但它仍然没有显示。移除了overflow hidden后，导航面板上的CSS转换和变换仍然不起作用。现在导航很难看也没关系，我还没有完全设计好所有的样式，但是nav仍然没有达到我在上面放置的CSS转换和转换的预期效果。它所做的只是弹出。。。但仍然没有背景颜色：O
jQuery(document).ready(function($) {
  /* Sidebar */
  $('#nav-button, #content').click(function() {
    $('#nav-button').toggleClass('open');
    $('body').toggleClass('sidebar-open');
    return false;
  });
});(jQuery);