使用 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">

    <a class="sidebar-nav-trigger">Menu</a>

    <div class="sidebar-nav-items">

        <!-- nav items -->

    </div>

</nav>

CSS

.sidebar-nav {}

.sidebar-nav.hide {

    display: none;

}

.sidebar-nav.show {

    display: block;

}

.sidebar-nav-trigger {}

jQuery

jQuery(document).ready(function ($) {

  $sidebarNav = $('.sidebar-nav');

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

  $('.sidebar-nav__trigger').click(() => {

    $sidebarNav.toggleClass('show').toggleClass('hide');

  });

});

使用 CSS 转换可以做很多奇特的事情。出于演示目的，以下是使其透明并将其移动 50% 宽度的样式。根据需要修改。

CSS

.sidebar-nav {

    transition: opacity 0.4s, transform 0.4s;

}

.sidebar-nav.hide {

    pointer-events: none; /* "hides" it from mouse, a more modern technique than visibility: hidden; */

    opacity: 0;

    transform: translateX(50%);

}

.sidebar-nav.show {

    pointer-events: auto;

    opacity: 1;

    transform: translateX(0);

}

Answer 2

为什么不坚持使用 jQuery 代码来简单地解决加载问题呢？您可以将其默认隐藏并告诉 jQuery 显示它，以便在页面加载时将其隐藏。

如果你想使用 CSS，那么你可以分配一个closed和open类（将它们命名为任何名称），并为每个类名称进行更改，你有一组 css 属性（宽度）等。你可以使用transitioncss 属性来动画它。

然后，为了让它从一个转到另一个，您仍然需要使用 JS 从元素中添加或删除类，这很容易做到。

1. 使用JS选择元素

2. 用于classList根据需要添加/删除类

Answer 3

最终您想要删除导航栏闪烁。所以 CSS 是一种选择，HTML 是另一种选择，JavaScript 又是另一种选择。

jQuery 根据显示（无或块）切换可见性，因此display:none;在 CSS 中使用如下所示：

nav {

  display:none;

  font-size: 1.5em;

  position: fixed;

  height: 100%;

}

如果这还不够快，您可以将其写在 HTML ( <nav style="display:none;">) 中，但 CSS 应该没问题。

然后，删除 jQuery 中的隐藏，因为您已经隐藏了它：

$nav = $("nav");

  //$nav.hide();