我正在开发一个导航侧边栏，可以在单击或发生类似事件时从窗口左侧左右切换。使用 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/
3 回答
白衣染霜花
TA贡献1796条经验 获得超10个赞
如果您不想偏离已有的内容太远，您可以更改 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);
}
凤凰求蛊
TA贡献1825条经验 获得超4个赞
为什么不坚持使用 jQuery 代码来简单地解决加载问题呢？您可以将其默认隐藏并告诉 jQuery 显示它，以便在页面加载时将其隐藏。
如果你想使用 CSS，那么你可以分配一个closed和open类（将它们命名为任何名称），并为每个类名称进行更改，你有一组 css 属性（宽度）等。你可以使用transitioncss 属性来动画它。
然后，为了让它从一个转到另一个，您仍然需要使用 JS 从元素中添加或删除类，这很容易做到。
使用JS选择元素
用于
classList根据需要添加/删除类
千巷猫影
TA贡献1829条经验 获得超7个赞
最终您想要删除导航栏闪烁。所以 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();
- 3 回答
- 0 关注
- 82 浏览
添加回答
举报
0/150
提交
取消