首頁猿問使用 CSS...

使用 CSS 切換導航欄，而不是使用 JavaScript/jQuery

Html5

MMTTMM 2023-10-30 15:13:28

我正在開發一個導航側邊欄，可以在單擊或發生類似事件時從窗口左側左右切換。使用 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”而不是父元素。

超文本標記語言

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

}

反對回復 2023-10-30

鳳凰求蠱

TA貢獻1825條經驗獲得超4個贊

為什么不堅持使用 jQuery 代碼來簡單地解決加載問題呢？您可以將其默認隱藏并告訴 jQuery 顯示它，以便在頁面加載時將其隱藏。

如果你想使用 CSS，那么你可以分配一個closed和open類（將它們命名為任何名稱），并為每個類名稱進行更改，你有一組 css 屬性（寬度）等。你可以使用transitioncss 屬性來動畫它。

然后，為了讓它從一個轉到另一個，您仍然需要使用 JS 從元素中添加或刪除類，這很容易做到。

使用JS選擇元素
用于classList根據需要添加/刪除類

反對回復 2023-10-30

千巷貓影

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

反對回復 2023-10-30

3 回答
0 關注
230 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

使用 CSS 切換導航欄，而不是使用 JavaScript/jQuery

使用 CSS 切換導航欄，而不是使用 JavaScript/jQuery

3 回答

添加回答

使用 CSS 切換導航欄，而不是使用 JavaScript/jQuery

使用 CSS 切換導航欄，而不是使用 JavaScript/jQuery