我正在開發(fā)一個(gè)導(dǎo)航側(cè)邊欄，可以在單擊或發(fā)生類似事件時(shí)從窗口左側(cè)左右切換。使用 jQuery，看起來相當(dāng)簡單：$(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); })});然而，有一個(gè)小問題。當(dāng)我刷新頁面時(shí)，有一小會兒，您可以看到導(dǎo)航欄可見，然后很快消失，這似乎表明網(wǎng)頁加載了導(dǎo)航欄元素，然后加載了 jQuery 腳本，該腳本調(diào)用手動(dòng)隱藏導(dǎo)航$nav.hide()欄在導(dǎo)航欄已經(jīng)可見之后。因此，我想更改我的導(dǎo)航欄以使用 CSS 類進(jìn)行切換。我見過網(wǎng)站使用諸如class="nav-open"和 切換類本身的存在來顯示導(dǎo)航欄的代碼，但我在嘗試使用當(dāng)前代碼實(shí)現(xiàn)的滑動(dòng)動(dòng)畫來實(shí)現(xiàn)它時(shí)遇到了麻煩。visibility="hidden"我知道它與和有關(guān)"visible"，所以如果有人能指點(diǎn)，我將不勝感激！https://jsfiddle.net/TrueshotBarrage/7kqL318b/3/
3 回答
白衣染霜花
TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超10個(gè)贊
如果您不想偏離已有的內(nèi)容太遠(yuǎn)，您可以更改 jQuery 正在執(zhí)行的操作。正如 Badrush 上面建議的那樣，使用 CSStransition來制作動(dòng)畫。
使用 CSS隱藏nav并切換類名稱以隱藏和顯示?？紤]為元素指定一個(gè)類名稱，并使用該名稱而不是標(biāo)簽名稱來選擇元素。下面我給它命名了.sidebar-nav。
.sidebar-nav-trigger可以住在外面或里面nav。如果它在里面，您需要設(shè)置樣式/隱藏/顯示“.sidebar-nav-items”而不是父元素。
超文本標(biāo)記語言
<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 轉(zhuǎn)換可以做很多奇特的事情。出于演示目的，以下是使其透明并將其移動(dòng) 50% 寬度的樣式。根據(jù)需要修改。
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貢獻(xiàn)1825條經(jīng)驗(yàn) 獲得超4個(gè)贊
為什么不堅(jiān)持使用 jQuery 代碼來簡單地解決加載問題呢？您可以將其默認(rèn)隱藏并告訴 jQuery 顯示它，以便在頁面加載時(shí)將其隱藏。
如果你想使用 CSS，那么你可以分配一個(gè)closed和open類（將它們命名為任何名稱），并為每個(gè)類名稱進(jìn)行更改，你有一組 css 屬性（寬度）等。你可以使用transitioncss 屬性來動(dòng)畫它。
然后，為了讓它從一個(gè)轉(zhuǎn)到另一個(gè)，您仍然需要使用 JS 從元素中添加或刪除類，這很容易做到。
使用JS選擇元素
用于
classList根據(jù)需要添加/刪除類
千巷貓影
TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超7個(gè)贊
最終您想要?jiǎng)h除導(dǎo)航欄閃爍。所以 CSS 是一種選擇，HTML 是另一種選擇，JavaScript 又是另一種選擇。
jQuery 根據(jù)顯示（無或塊）切換可見性，因此display:none;在 CSS 中使用如下所示：
nav {
display:none;
font-size: 1.5em;
position: fixed;
height: 100%;
}
如果這還不夠快，您可以將其寫在 HTML ( <nav style="display:none;">) 中，但 CSS 應(yīng)該沒問題。
然后，刪除 jQuery 中的隱藏，因?yàn)槟呀?jīng)隱藏了它：
$nav = $("nav");
//$nav.hide();
- 3 回答
- 0 關(guān)注
- 204 瀏覽
添加回答
舉報(bào)
0/150
提交
取消