导航栏的切换按钮下拉以显示计算机上的部分 当我通过减小窗口宽度激活它时，但是当我通过我的手机访问网站时，该按钮就像一个图像并且不会下拉。我相信这是因为该按钮不是触摸响应式的，那么我怎样才能有效地将它变成手机上的按钮？
到目前为止，这是我的代码:
编辑:根据请求，我添加了更多代码。这是 HTML 头部部分:
<head>
<title>****</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/images/logo.png" type="image/x-icon">
<!--fontawesome, bootstrap, jquery-->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
<!--/fontawesome, bootstrap, jquery-->
<script src="/assets/smooth-scroll.min.js"></script>
<link href="/assets/stylesheet.css" rel="stylesheet">
</head>
HTML
<div class="container-fluid">
<nav class="row navbar">
<div class="navbar-header">
<a class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><i class="fa fa-lg fa-bars"></i>
<a class="navbar-brand" href="/"><img src="/assets/images/logo.png" width="40" height="40" class="d-inline-block align-top" alt=""> ******</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a data-scroll class="nav-item nav-link" href="#about">About</a></li>
<li><a data-scroll class="nav-item nav-link" href="#getinvolved">Get Involved</a></li>
<li><a data-scroll class="nav-item nav-link" href="#contact">Contact Us</a></li>
</ul>
</div>
</nav>
</div>
CSS
.navbar {
padding: 10px 0px;
}
.navbar-toggle {
border: 1px solid #000;
padding: 11px 10px;
border-radius: 2px;
}
.navbar-brand {
font-size: 22px;
padding: 10px 15px;
color: #000;
}
.navbar-brand:hover, .navbar-brand:focus, .navbar-brand:active {
color: #000;
}
.navbar-brand img{
margin: 0px 10px 0px 0px
}
#navbar a, #navbar a:hover, #navbar a:focus, #navbar a:active {
text-decoration: none;
color: #000;
cursor: default;
}
最佳答案
您错过了包含 jQuery 的内容吗？你的代码对我有用，这是 fiddle .
<div class="container-fluid">
<nav class="row navbar">
<div class="navbar-header">
<a class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">uuuuu<i class="fa fa-lg fa-bars"></i>
<a class="navbar-brand" href="#"><img src="" width="40" height="40" class="d-inline-block align-top" alt=""> ******</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a data-scroll class="nav-item nav-link" href="#about">About</a></li>
<li><a data-scroll class="nav-item nav-link" href="#getinvolved">Get Involved</a></li>
<li><a data-scroll class="nav-item nav-link" href="#contact">Contact Us</a></li>
</ul>
</div>
</nav>
我也适用于移动设备。请发布更多代码。
关于html - 导航栏中的切换下拉菜单在手机上没有触摸响应？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46121227/