使用 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 类进行切换。 我已经看到网站使用诸如class="nav-open"之类的代码并切换 class 本身的存在以显示导航栏，但是我在尝试使用我当前代码实现的滑动 animation 来实现它时遇到了麻烦。 我知道这与visibility="hidden"和"visible"有关系，所以如果有人可以指点，将不胜感激！

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

Answer 1

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

If you want to use CSS then you can assign a closed and open classes (name them whatever) and change for each class name you have your set of css properties (width) etc. you can use transition css property to animate it.

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

1. 使用JS对select元素
2. 使用classList根据需要添加/删除类

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

Answer 2

最终，您要删除导航栏 flash。 所以 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();

Answer 3

如果您不想离已有的太远，您可以更改 jQuery 正在做的事情。 正如上面 Badrush 建议的那样，使用 CSS transition来执行 animation。

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

.sidebar-nav-trigger可以位于nav的外部或内部。 如果它在里面，你会想要样式/隐藏/显示“.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 转换可以做很多花哨的事情。 出于演示目的，下面是 styles 以使其透明并将其移动 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);
}