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

Question

我正在开发一个导航侧边栏，它在单击或某些类似事件时从 window 的左侧左右切换。使用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 classes 切换。我已经看到网站使用 class="nav-open" 之类的代码并切换 class 本身的存在以显示导航栏，但我在尝试使用我当前代码实现的滑动动画来实现它时遇到了麻烦.我知道它与visibility="hidden"和"visible"有关，所以如果有人能指点一下，将不胜感激！

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

Answer 1

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

如果你想使用 CSS 那么你可以分配一个 closed 和 open classes（随便命名）并为每个 class name 你有一组 css 属性（宽度）等。你可以使用 transition css 属性来设置动画。

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

使用JS来select元素
根据需要使用 classList 到 add/remove classes

https://alligator.io/js/classlist/

Answer 2

最终你想删除导航栏闪光灯。所以 CSS 是一个选项，HTML 是另一个选项，JavaScript 是另一个选项。

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

nav {
  display:none;
  font-size: 1.5em;
  position: fixed;
  height: 100%;
}

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

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

$nav = $("nav");
  //$nav.hide();

Answer 3

如果您不想离现有的太远，您可以改变 jQuery 正在做的事情。正如 Badrush 上面建议的那样，使用 CSS transition 来制作动画。

用 CSS 隐藏 nav 并切换 class 名称以隐藏和显示。考虑给元素一个 class 名称，并用 select 名称代替标签名称给元素。下面我命名为.sidebar-nav.

.sidebar-nav-trigger 可以住在 nav 外面或里面。如果它在里面，你会想要 style/hide/show '.sidebar-nav-items' 而不是父元素。

HTML

<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);
}

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

Using CSS to toggle navigation bar instead of using JavaScript/jQuery

html

javascript

css

jquery

navigationbar