Question

导航栏的切换按钮向下移动以显示计算机上的部分当我通过减小窗口宽度来激活它时，但当我通过我的手机上网时，按钮就像一个图像而不会下降。我相信这是因为按钮不具有触控功能，所以我怎样才能有效地将它作为手机上的按钮？

到目前为止，这是我的代码：

编辑：每次请求，我添加了更多代码。这是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;

}

Answer 1

你错过了包含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>

也适用于移动设备。请发布更多代码。

导航栏中的切换下拉不是手机上的触摸响应？

1 个答案: