Html 数据切换中的奇怪效果

我有一个引导导航栏在我的网站，但当它显示折叠，如果点击一个链接，菜单不关闭，我想导航到页面，菜单也将关闭

我补充说

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

并执行此技巧，但链接在未折叠时会产生奇怪的效果（在桌面模式下）

我创作了一把小提琴：

---

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

这是因为在桌面上的菜单没有消失，它只是更改了布局，因此仍将尝试折叠它

如果你只是需要解决这个问题，不介意它有点混乱，这里是我想到的

有两个元素，一个在手机上可见，另一个在桌面上可见（注意类）

移动：

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

桌面：

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

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

如果你只是需要解决这个问题，不介意它有点混乱，这里是我想到的

有两个元素，一个在手机上可见，另一个在桌面上可见（注意类）

移动：

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

桌面：

<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类是否有可能。。。。但是非常感谢你的帮助谢谢Halden，我会试试的，但确实有点乱。。。我和angular一起工作，我不知道ng类是否有可能。。。。但是非常感谢你的帮助