gpt4 book ai didi

javascript - Bootstrap 中的切换按钮不想 "untoggle"

转载 作者:行者123 更新时间:2023-11-28 15:04:21 25 4
gpt4 key购买 nike

因此,我正在使用 Laravela 和 Vue.js 创建一个简单的网站,以及响应式网站,我添加了 bootstrap 4。一切正常,导航栏在它应该折叠的时候折叠,切换按钮出现,当我点击它时,它显示一切。但是,当我单击切换按钮以隐藏导航栏时,它只是闪烁并且不执行任何操作。

<!--Navigation bar-->
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand" href="#">website<span id = "EditorColorist">editor colorist</span></a>
<button class="navbar-toggler" data-toggle="collapse" data-target = "#collapsibleNavId">
<span class = "navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="/">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">CONTACT</a>
</li>
</ul>
</div>
</nav>
<!--Navigation bar-->

是的,我在 CSS 之前添加了 JS、Jquery。

最佳答案

我为此创建了一个简单的片段进行测试,它上面的切换器对我来说工作得很好。欢迎您亲自尝试。

<html>

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body>
<!--Navigation bar-->
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand" href="#">website<span id = "EditorColorist"> editor colorist</span></a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#collapsibleNavId">
<span class = "navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="/">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">CONTACT</a>
</li>
</ul>
</div>
</nav>
<!--Navigation bar-->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

</html>

您可以尝试检查您的 css 以确保您没有任何与 bootstrap 使用的类冲突的类。我已经看到这种情况发生并导致导航栏的工作方式出现问题。

关于javascript - Bootstrap 中的切换按钮不想 "untoggle",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59544938/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com