1

此代码不起作用，它显示 3 个水平条按钮，但单击后没有任何反应。引导程序-3.3 jquery-1.1

切换导航 CopyHere 
        <div class="collapse navbar-collapse" id="navbar">
           <ul class="[ nav navbar-nav navbar-right ]">
              <li class="[ visible-xs ]">
                 <form action="http://bootsnipp.com/search" method="GET" role="search">
                    <div class="[ input-group ]"> <input type="text" class="[ form-control ]" name="q" placeholder="Search for snippets"> <span class="[ input-group-btn ]"> <button class="[ btn btn-primary ]" type="submit"><span class="[ glyphicon glyphicon-search ]"></span></button> <button class="[ btn btn-danger ]" type="reset"><span class="[ glyphicon glyphicon-remove ]"></span></button> </span></div>
                 </form>
              </li>
              <li><a href="http://copyhere.online/" class="[ animate ]"><span class="fa fa-plus" style="color:green;"> Create New</span></a></li>
              <li><a href="http://copyhere.online/about.php" class="[ animate ]"><span class="fa fa-user" style="color:purple;"> About</span></a></li>
              <li><a href="http://copyhere.online/policy.php" class="[ animate ]"><span class="fa fa-legal" style="color:red;"> Policy</span></a></li>
              <li><a href="http://copyhere.online/terms.php" class="[ animate ]"><span class="fa fa-info" style="color:blue;"> Terms</span></a></li>
              <li class="[ hidden-xs ]"><a href="http://copyhere.online/index.php#toggle-search" class="[ animate ]"><span class="[ glyphicon glyphicon-search ]"></span></a></li>
           </ul>
        </div>
4

2 回答 2

1

您的 HTML 代码看起来不错，但惊讶地看到类名中的大括号。

我认为您可能在 HTML 页面中加载了两次引导程序，这使得切换事件执行两次，从而导致折叠类切换两次。检查您的 HTML 并查看该类被更改了两次。

于 2019-12-06T04:39:29.420 回答
0

您可能没有将正确的 id 添加到 navbar-toggle data-target 属性。请尝试此代码

<script
			  src="https://code.jquery.com/jquery-1.12.4.js"
			  integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
			  crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
<div class="collapse navbar-collapse" id="navbar">
           <ul class="[ nav navbar-nav navbar-right ]">
              <li class="[ visible-xs ]">
                 <form action="http://bootsnipp.com/search" method="GET" role="search">
                    <div class="[ input-group ]"> <input type="text" class="[ form-control ]" name="q" placeholder="Search for snippets"> <span class="[ input-group-btn ]"> <button class="[ btn btn-primary ]" type="submit"><span class="[ glyphicon glyphicon-search ]"></span></button> <button class="[ btn btn-danger ]" type="reset"><span class="[ glyphicon glyphicon-remove ]"></span></button> </span></div>
                 </form>
              </li>
              <li><a href="http://copyhere.online/" class="[ animate ]"><span class="fa fa-plus" style="color:green;"> Create New</span></a></li>
              <li><a href="http://copyhere.online/about.php" class="[ animate ]"><span class="fa fa-user" style="color:purple;"> About</span></a></li>
              <li><a href="http://copyhere.online/policy.php" class="[ animate ]"><span class="fa fa-legal" style="color:red;"> Policy</span></a></li>
              <li><a href="http://copyhere.online/terms.php" class="[ animate ]"><span class="fa fa-info" style="color:blue;"> Terms</span></a></li>
              <li class="[ hidden-xs ]"><a href="http://copyhere.online/index.php#toggle-search" class="[ animate ]"><span class="[ glyphicon glyphicon-search ]"></span></a></li>
           </ul>
        </div>
         </div><!-- /.container-fluid -->
</nav>

于 2019-12-06T04:51:53.227 回答