【问题标题】:Strange effect in data-toggle数据切换中的奇怪效果
【发布时间】:2019-11-03 10:25:17
【问题描述】:

我的站点中有一个引导导航栏,但是当它显示为折叠时,如果单击链接,菜单不会关闭,我想导航到该页面并且菜单也将关闭。

我已经添加了

data-toggle="collapse" data-target="#navbarNav"

并且做的伎俩,但是链接在不折叠时会产生奇怪的效果(在桌面模式下)

我创建了一个小提琴:

http://jsfiddle.net/soyjuanmedina/rscdu7gv/3/

将代码添加到链接“主页”中,您可以看到(您需要展开结果窗口才能看到菜单未折叠)并查看当单击它时,单词会消失以再次出现

【问题讨论】:

    标签: html bootstrap-4 navbar


    【解决方案1】:

    发生这种情况是因为桌面上的菜单并没有消失,它只是改变了它的布局,所以它仍然会尝试折叠它。

    如果您只是需要解决这个问题并且不介意它有点混乱,这就是我想出的。

    有两个元素,一个在移动设备上可见,一个在桌面上可见(注意

    移动

    <a class="nav-link d-block d-md-none" href="#" data-toggle="collapse" data-target="#navbarSupportedContent">
        Home
    </a>
    

    桌面

    <a class="nav-link d-none d-md-block" href="#">
        Home
    </a>
    

    所以最终结果将是:

    <li class="nav-item active">
        <a class="nav-link d-none d-md-block" href="#">
            Home
        </a>
        <a class="nav-link d-block d-md-none" href="#" data-toggle="collapse" data-target="#navbarSupportedContent">
          Home
        </a>
    </li>
    

    【讨论】:

    • 感谢 Halden,我会尝试,但确实有点乱...我使用 angular,我不知道是否可以使用 ng 类...但非常感谢为您提供帮助
    猜你喜欢
    • 2011-04-15
    • 1970-01-01
    • 1970-01-01
    • 2022-10-02
    • 1970-01-01
    • 1970-01-01
    • 2011-11-01
    • 2016-09-03
    • 2011-05-16
    相关资源
    最近更新 更多