数据切换中的奇怪效果

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>