Question

我是新手，我被困住了。我相信我正在导入正确的脚本以在我的页面上使用bootstrap，但每当我点击我的＆＃34;阅读＆＃34;按钮，唯一发生的事情是＆＃34;＃＆＃34;被添加到我的网址（假设出现侧导航栏）。当我在jfiddle上使用这个完全相同的代码 - https://jsfiddle.net/2373rjko/ - （减去头部）时，一切正常。这让我相信我没有正确安装bootstrap或jquery。你能看一下我的代码并确保我调用我需要的库。非常感谢!!这是我的代码：

的index.html

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum- scale=1,width=device-width">
 <meta name="mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="theme-color" content="#000000">
 <meta name="description" content="">
 <meta name="author" content="">
 <title>Imagining Ancient Cornith</title>
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">  </script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 <script src="assets/js/ver.js"></script>
    <!-- Load Leaflet - map application -->
 <link rel="stylesheet" href="leaflet/leaflet.css"/>
 <script src="leaflet/leaflet.js"></script>
 <script src="leaflet/shp.js"></script>
 <script src="leaflet/catiline.js"></script>
 <script src="leaflet/leaflet.shpfile.js"></script>
</head>

 <body>
 <div class="navbar navbar-inverse navbar-static-top" role="navigation">
 <div class="container-fluid">
 <div class="navbar-header">
   <div class="navbar-icon-container">
     <a href="#" class="navbar-icon pull-right visible-xs" id="nav-btn"><i class="fa fa-bars fa-lg white"></i></a>
     <a href="#" class="navbar-icon pull-right visible-xs" id="sidebar-toggle-btn"><i class="fa fa-search fa-lg white"></i></a>
  </div>
  <a class="navbar-brand" href="#">IAC</a>
</div>
<div class="navbar-collapse collapse">
  <form class="navbar-form navbar-right" role="search">
    <div class="form-group has-feedback">
      <input id="searchbox" type="text" placeholder="Search" class="form-control">
      <span id="searchicon" class="fa fa-search form-control-feedback"></span>
    </div>
  </form>
   <ul class="nav navbar-nav">
     <li class="dropdown">
       <a id="toolsDrop" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-globe white"></i>&nbsp;&nbsp;Resources <b class="caret"></b></a>
       <ul class="dropdown-menu">
         <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="full-extent-btn"><i class="fa fa-arrows-alt"></i>&nbsp;&nbsp;About</a></li>
         <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="legend-btn"><i class="fa fa-picture-o"></i>&nbsp;&nbsp;Home</a></li>
         <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="legend-btn"><i class="fa fa-picture-o"></i>&nbsp;&nbsp;Culture Essays</a></li>
         <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="legend-btn"><i class="fa fa-picture-o"></i>&nbsp;&nbsp;Vocab</a></li>
         <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="legend-btn"><i class="fa fa-picture-o"></i>&nbsp;&nbsp;Grammar</a></li>
         <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="legend-btn"><i class="fa fa-picture-o"></i>&nbsp;&nbsp;Media</a></li>
         <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="legend-btn"><i class="fa fa-picture-o"></i>&nbsp;&nbsp;Activities</a></li>
         <li class="divider hidden-xs"></li>
        <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="login-btn"><i class="fa fa-user"></i>&nbsp;&nbsp;Login</a></li>
       </ul>
     </li>
     <li class="dropdown">
      <a class="dropdown-toggle" id="downloadDrop" href="#" role="button" data-toggle="dropdown"><i class="fa fa-cloud-download white"></i>&nbsp;&nbsp;Table Of Contents <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#" target="_blank" data-toggle="collapse" data-target=".navbar-collapse.in"><i class="fa fa-download"></i>&nbsp;&nbsp;Book 1</a></li>
        <li><a href="#" target="_blank" data-toggle="collapse" data-target=".navbar-collapse.in"><i class="fa fa-download"></i>&nbsp;&nbsp;Book 2</a></li>
        <li><a href="#" target="_blank" data-toggle="collapse" data-target=".navbar-collapse.in"><i class="fa fa-download"></i>&nbsp;&nbsp;Book 3</a></li>
        <li><a href="#" target="_blank" data-toggle="collapse" data-target=".navbar-collapse.in"><i class="fa fa-download"></i>&nbsp;&nbsp;Book 4</a></li>
      </ul>
      </li>
      <li class="hidden-xs"><a id="readings-btn" href="#" data-toggle="collapse" data-target=".navbar-collapse.in"><i class="fa fa-list white"></i>&nbsp;&nbsp;Readings</a></li>
    </ul>
   </div><!--/.navbar-collapse -->
  </div>
 </div>
<div class="container-fluid">
 <div id="sidebar" class="col-xs-2 bg-warning">
   <h4>Options</h4>
    <ul>
      <li>Pre Readings</li>
      <li>Passage</li>
      <li>Post Readings</li>
      <li>Media</li>
      <li>Questions</li>
    </ul>
</div>
<div id="map" class="col-xs-5 bg-info">

</div>
<div id="text-container" class="col-xs-5 bg-success">
  <div id="text-title"> I am a title </div>
  <div id="text-content"> Hey, I guess this is where our readings are going to be located.</div>
</div>

这是我的JS文件assets / js / ver.js

  $("#readings-btn").on("click", function(e){ 
 if($("#sidebar").is(":hidden")){
   $("#sidebar").show();
   $("#map").removeClass("col-xs-6").addClass("col-xs-5");
   $("#text-container").removeClass("col-xs-6").addClass("col-xs-5");
} else {
   $("#sidebar").hide();
   $("#map").removeClass("col-xs-5").addClass("col-xs-6");
   $("#text-container").removeClass("col-xs-5").addClass("col-xs-6");
}
});

Answer 1

尝试将代码包装在

中

 $(document).ready(function(){
   // your code here
 });

Jsfiddle默认执行此操作

Bootstrap按钮仅适用于jfiddle，而不适用于网页

1 个答案: