在bootstrap 4.6中,如何在用户单击新页面时保持可折叠菜单打开

v6ylcynt  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(1)|浏览(153)

我有一个左侧的垂直导航菜单,其中有几个部分可以折叠子菜单。我如何才能使用户从该子菜单(#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">
xpszyzbs

xpszyzbs1#

给你...
您需要使用一些JavaScript/jQuery。

步骤1

用户单击链接时添加查询字符串(source)。

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

检查页面加载(source)上的查询字符串值。

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”的值为“uncollapted”,则删除collapsed并添加show Bootstrap类。

$( document ).ready(function() {
    $('.navbar-toggler').removeClass('collapsed');
    $('.navbar-collapse').addClass('show');
});
  • 注意:如果你只是复制粘贴我的答案中的代码,这三个步骤将无法工作。你需要添加一些小东西(例如,步骤3中的if语句),但这是我认为你可以让它工作的方法。*

相关问题