gpt4 book ai didi

javascript - 如何从折叠按钮( Bootstrap )中显示下拉菜单?

转载 作者:行者123 更新时间:2023-11-27 23:19:26 28 4
gpt4 key购买 nike

我有这个用于 Bootstrap 导航栏的代码,我添加了折叠功能,所以每当你有一个小屏幕时,它会将页面链接折叠到按钮中,每当你按下 btn 时,它都会打开一个下拉菜单,但我有一个问题单击折叠 btn 没有任何反应请帮忙!

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initialscale=1">
<title>Home</title>
<link href="css/bootstrap.min.css" rel="stylesheet">

<style>
.box {
border: 1px solid grey;
background-color: #d3d3d3;
}
</style>
</head>

<body>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="" class="navbar-brand">My Website</a>
<button type="button" class="navbar-toggle" datatoggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="">Page 1</a></li>
<li><a href="">Page 2</a></li>
<li><a href="">Page 3</a></li>
</ul>
</div>
</div>
</div>

<script src="jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>

</html>

最佳答案

我发现您的data-toggle 属性中缺少-(hypen)

使用:

<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#myNavbar">

代替:

<button type="button" class="navbar-toggle" datatoggle="collapse"
data-target="#myNavbar">

Note: You must include jquery.js & bootstrap.js (located in js folder) files to use this feature.

关于javascript - 如何从折叠按钮( Bootstrap )中显示下拉菜单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41786068/

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