我有一個左側垂直導航選單,其中有幾個部分可以折疊子選單。我怎樣才能使當用戶從該子選單(#submenu1)導航到一個頁面時,該選單會在下一頁上展開?
<ul class="nav flex-column flex-nowrap overflow-hidden">
<li class="nav-item">
<a class="nav-link collapsed" href="#submenu1" data-toggle="collapse" data-target="#submenu1">
<i class="fa-regular fa-user fa-fw"></i><span class="ml-1">Your Account</span>
</a>
<div class="collapse" id="submenu1" aria-expanded="false">
<ul class="flex-column pl-2 nav">
uj5u.com熱心網友回復:
干得好...
您需要使用一點 JavaScript/jQuery。
步驟1
當用戶單擊鏈接(源)時添加查詢字串。
element.addEventListener('click', function(event) {
// Stop the link from redirecting
event.preventDefault();
// Redirect instead with JavaScript
window.location.href = element.href '?menu=uncollapsed';
}, false);
第2步
檢查頁面加載(源)上的查詢字串值。
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
});
// Get the value of "menu" --> "https://example.com/?menu=uncollapsed"
let value = params.menu; // "uncollapsed"
第 3 步
如果“menu”的值在頁面加載時是“uncollapsed”,則洗掉collapsed并添加showBootstrap 類。
$( document ).ready(function() {
$('.navbar-toggler').removeClass('collapsed');
$('.navbar-collapse').addClass('show');
});
注意:如果您只是從我的答案中復制粘貼代碼,這三個步驟將不起作用。您需要添加一些小東西(例如,第 3 步中的 if 陳述句),但這是我認為您可以使其作業的方式。
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/507462.html
下一篇:在移動設備上,文本沒有占據全屏
