Question

在移动设备上或当我调整浏览器大小时，单击导航栏下拉菜单时不会下降。我已将导航条代码放在此处以阐述我的问题。在此先感谢您的帮助！

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
 </div>
</nav>

Answer 1

兄弟你错过了#属data-target这就是它的工作方式。

更改此行

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

由此

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

check the working demo here!

Answer 2

它的实例

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
 </div>
</nav>

＆＃13;

你错过＃{1}}上的＃data-target="myNavbar"来做

Answer 3

检查一下：

带有下拉菜单项的可折叠导航栏：

 <nav class="navbar navbar-expand-sm navbar-dark sticky-top shadow mb-4 bg-maximumBlueGreen">
 <a class="navbar-brand" href=".."><img src="home.png" width=30/></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#javasetupCollapsible">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="javasetupCollapsible">
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
	  <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"  data-target="#collapsenavdrop">Dropdown Menu</a>
      <div class="dropdown-menu" id="collapsenavdrop">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
      </div>
    </li>
      <li class="nav-item active">
      <a class="nav-link" href="#">Simple Menu</a>
    </li>   
    </ul>
  </div>  
</nav>

导航栏菜单下拉列表不起作用（单击时不会下拉）

3 个答案: