使用 CSS 切换导航栏，而不是使用 JavaScript/jQuery

Question

我正在开发一个导航侧边栏，可以在单击或发生类似事件时从窗口左侧左右切换。使用 jQuery，看起来相当简单：

$(document).ready(function () {

  $nav = $("nav");

  $nav.hide();

  // Toggles the nav bar when clicking the nav-intersect icon.

  $("#nav-intersect").click(() => {

    $nav.animate({ width: 'toggle' }, 350);

  })

});

然而，有一个小问题。当我刷新页面时，有一小会儿，您可以看到导航栏可见，然后很快消失，这似乎表明网页加载了导航栏元素，然后加载了 jQuery 脚本，该脚本调用手动隐藏导航$nav.hide()栏在导航栏已经可见之后。

因此，我想更改我的导航栏以使用 CSS 类进行切换。我见过网站使用诸如class="nav-open"和 切换类本身的存在来显示导航栏的代码，但我在尝试使用当前代码实现的滑动动画来实现它时遇到了麻烦。visibility="hidden"我知道它与和有关"visible"，所以如果有人能指点，我将不胜感激！

https://jsfiddle.net/TrueshotBarrage/7kqL318b/3/

Answer 1

如果您不想偏离已有的内容太远，您可以更改 jQuery 正在执行的操作。正如 Badrush 上面建议的那样，使用 CSStransition来制作动画。使用 CSS隐藏nav并切换类名称以隐藏和显示。考虑为元素指定一个类名称，并使用该名称而不是标签名称来选择元素。下面我给它命名了.sidebar-nav。.sidebar-nav-trigger可以住在外面或里面nav。如果它在里面，您需要设置样式/隐藏/显示“.sidebar-nav-items”而不是父元素。超文本标记语言<a class="sidebar-nav-trigger">Menu</a><nav class="sidebar-nav hide">&nbsp; &nbsp; <a class="sidebar-nav-trigger">Menu</a>&nbsp; &nbsp; <div class="sidebar-nav-items">&nbsp; &nbsp; &nbsp; &nbsp; <!-- nav items -->&nbsp; &nbsp; </div></nav>CSS.sidebar-nav {}.sidebar-nav.hide {&nbsp; &nbsp; display: none;}.sidebar-nav.show {&nbsp; &nbsp; display: block;}.sidebar-nav-trigger {}jQueryjQuery(document).ready(function ($) {&nbsp; $sidebarNav = $('.sidebar-nav');&nbsp; // Toggle the nav bar when clicking the nav-intersect icon.&nbsp; $('.sidebar-nav__trigger').click(() => {&nbsp; &nbsp; $sidebarNav.toggleClass('show').toggleClass('hide');&nbsp; });});使用 CSS 转换可以做很多奇特的事情。出于演示目的，以下是使其透明并将其移动 50% 宽度的样式。根据需要修改。CSS.sidebar-nav {&nbsp; &nbsp; transition: opacity 0.4s, transform 0.4s;}.sidebar-nav.hide {&nbsp; &nbsp; pointer-events: none; /* "hides" it from mouse, a more modern technique than visibility: hidden; */&nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; transform: translateX(50%);}.sidebar-nav.show {&nbsp; &nbsp; pointer-events: auto;&nbsp; &nbsp; opacity: 1;&nbsp; &nbsp; transform: translateX(0);}

Answer 2

为什么不坚持使用 jQuery 代码来简单地解决加载问题呢？您可以将其默认隐藏并告诉 jQuery 显示它，以便在页面加载时将其隐藏。如果你想使用 CSS，那么你可以分配一个closed和open类（将它们命名为任何名称），并为每个类名称进行更改，你有一组 css 属性（宽度）等。你可以使用transitioncss 属性来动画它。然后，为了让它从一个转到另一个，您仍然需要使用 JS 从元素中添加或删除类，这很容易做到。使用JS选择元素用于classList根据需要添加/删除类

Answer 3

最终您想要删除导航栏闪烁。所以 CSS 是一种选择，HTML 是另一种选择，JavaScript 又是另一种选择。jQuery 根据显示（无或块）切换可见性，因此display:none;在 CSS 中使用如下所示：nav {&nbsp; display:none;&nbsp; font-size: 1.5em;&nbsp; position: fixed;&nbsp; height: 100%;}如果这还不够快，您可以将其写在 HTML ( <nav style="display:none;">) 中，但 CSS 应该没问题。然后，删除 jQuery 中的隐藏，因为您已经隐藏了它：$nav = $("nav");&nbsp; //$nav.hide();