我正在開發一個導航側邊欄，可以在單擊或發生類似事件時從窗口左側左右切換。使用 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 關注
- 213 瀏覽
添加回答
舉報
0/150
提交
取消