Fatal编程技术网

Twitter bootstrap 引导折叠不起作用？

twitter-bootstrap

Twitter bootstrap 引导折叠不起作用？,twitter-bootstrap,Twitter Bootstrap,我试着用twitter引导程序编写代码 我的代码不起作用，请看一下我编写的崩溃代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta

我试着用twitter引导程序编写代码 我的代码不起作用，请看一下我编写的崩溃代码：

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>

<link type="text/css" rel="stylesheet" href="css/bootstrap.css"n />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>


</head>

<body>

<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<a href="#" class="navbar-brand">page</a>
</div>
<div align="center" class="navbar-collapse collapse" >
<ul class="nav navbar-nav">
<li><a href="#" >home</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</div>
</div>

<!------------------------------------------ Accordian ------------------------------->
<br/><br/><br/>

<div class="container">
<div class="row">
<div class="col-md-12">

<h2>Accordian</h2>

<div class="panel-group" id="accordian">

<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">

<a data-toggle="collapse" data-parent="#accordian" href="#section1">

Q1
</a>

</h4>

</div>

<div class="panel-collapse collapse in" id="#section1">

<div class="panel-body">
this will contain text 

</div>
</div>

</div>
</div>
</div>

</div>

</div>


</body>
</html>
我已经读到，我需要喜欢我的Jquery代码，但它仍然不起作用。有人能告诉我出了什么问题吗？

这里有一个工作提琴供您使用，使用相同的代码：

这是手风琴的更新代码：

<div class="col-md-12">
    <h2>Accordian</h2>
    <div class="panel-group" id="accordian" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="heading1">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordian" href="#section1"  aria-expanded="true" aria-controls="section1"> Q1</a>
              </h4>
            </div>
            <!-- id="#section1" needs to be updated to id="section1"-->
            <div class="panel-collapse collapse in" id="section1" role="tabpanel" aria-labelledby="heading1">
                <div class="panel-body">this will contain text</div>
            </div>
        </div>
    </div>
</div>
您还需要了解，在超链接中指定要滚动的html元素id。 如果href=section1，则元素id应为

有关ARIA的更多信息：

看起来您的div标记id声明有一个输入错误-它有一个符号。就你而言：

而不是应该是