Question

我的网站上有一个引导导航栏，但显示为折叠时，如果单击链接，则菜单不会关闭，我想导航至该页面，菜单也会关闭。

我添加了

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

做到这一点，但是当链接没有崩溃时（在桌面模式下），该链接会产生奇怪的效果

我创建了一个小提琴：

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

将代码添加到“首页”链接中，您可以看到（您需要扩展结果窗口以查看菜单未折叠），并查看当单击它时单词消失以再次出现

Answer 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>

数据切换中的奇怪效果

1 个答案: