Fatal编程技术网
  • jquery/
  • Jquery 引导3折叠面板不工作

Jquery 引导3折叠面板不工作

jquery html twitter-bootstrap-3

Jquery 引导3折叠面板不工作,jquery,html,twitter-bootstrap-3,Jquery,Html,Twitter Bootstrap 3,我想使用Bootstrap3中的折叠面板。所以我从w3schools的例子中复制了这个例子 <div class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" href="#collaps

我想使用Bootstrap3中的折叠面板。所以我从w3schools的例子中复制了这个例子

    <div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">Panel Body</div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>
</div>


面板主体
面板页脚
我想这会管用的。但事实并非如此。这是我的html文件：

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>test</title>

    <!--Einbinden von less und less-compiler -->
    <link rel="stylesheet/less" type="text/css" href="bootstrap-3.3.5/less/bootstrap.less">
    <script src="bootstrap-3.3.5/js/less.js" type="text/javascript"></script>
    <link href="bootstrap-3.3.5/dist/css/stickyfooter.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <div class="container">
  <h2>Collapsible Panel</h2>
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">Panel Body</div>
        <div class="panel-footer">Panel Footer</div>
      </div>
    </div>
  </div>
</div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap-3.3.5/js/bootstrap.min.js"></script>    
  </body>
</html>


测试
可折叠面板
面板主体
面板页脚
我可以看到面板和标题已链接。但如果我点击它，什么也不会显示

我是网络开发新手，所以我认为这是一个noob问题D

信息：引导已加载，我可以很好地使用css。Jquery也应该加载，因为我可以使用
$（document）.ready（）
函数。

替换此行：

<link rel="stylesheet/less" type="text/css" href="bootstrap-3.3.5/less/bootstrap.less">
为此：

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
原因：

Less.js如果您使用的是Chrome，并且由于已知的Chrome问题，页面路径以“file://”开头，则浏览器脚本当前无法工作

Via-

它也不起作用。Firefox也不工作/