Bootstrap手风琴没有崩溃

时间:2015-12-07 03:43:35

标签: javascript jquery html css twitter-bootstrap

我正在为我的网站开发一个bootstrap手风琴,但它在Dreamweaver cc中没有工作,当我在浏览器中发布它时。 看起来它适用于JSFiddle。这是一个链接:JSFiddle



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                    <a role="button" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#one1" aria-expanded="false" aria-controls="one1" >SHOP LIST</a>
                </h4>
            </div>
            <div id="one1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne" >
                <div class="panel-body">
                    <table width="903" border="0">
                        <tbody>
                        <tr style="font-size: 10px">
                            <td width="293" align="center" valign="top" style="font-size: 10px">
                                <p1>HOKKAIDO<br>GRAN SAC'S 苫小牧 0144-53-5355</p1><br><br>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
&#13;
&#13;
&#13;

我一直在寻找解决方案几个小时,但仍然无法弄清楚我的手风琴有什么问题。

1 个答案:

答案 0 :(得分:0)

以下是示例,请检查您的错误在哪里,但您仍有疑问请发表评论。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <article class="content col-sm-12 col-md-12">
        <p>Some Text </p>
        <br>
        <div class="clearfix"></div>
        <div class="filter-box accordions-filter">
            <div class="panel-group filter-elements" id="accordion">
                <div class="panel panel-default panel-bg web-design">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                            <i class="fa fa-circle"></i> Text 1
                            </a>
                        </div>
                    </div>
                    <div id="collapse1" class="panel-collapse collapse">
                        <div class="panel-body">
                            <p>No worries. Just let us know your preferred time slot. We will call you 1 hour before to know your availability. It is possible to reschedule the call; your time is valuable to us.</p>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default panel-bg web-design">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
                            <i class="fa fa-circle"></i> Text 2
                            </a>
                        </div>
                    </div>
                    <div id="collapse2" class="panel-collapse collapse">
                        <div class="panel-body">
                            <p>We are one call away to help you out. Your emergency is our priority.</p>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default panel-bg web-design">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
                            <i class="fa fa-circle"></i>Text 3
                            </a>
                        </div>
                    </div>
                    <div id="collapse3" class="panel-collapse collapse">
                        <div class="panel-body">
                            <p>Yes. We are working through the week. Your weekends are our peak days as we value your time :)</p>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default panel-bg web-design">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">
                            <i class="fa fa-circle"></i>Text 4
                            </a>
                        </div>
                    </div>
                    <div id="collapse4" class="panel-collapse collapse">
                        <div class="panel-body">
                            <p>Any small work of around 30 mins is included in this minimum charge. It also includes an inspection and visit to your place so that Zimmber Champ will understand your requirement and will offer best available solution to suit your budget requirement. These visiting charges will be waived off, if you avail of our services. But minimum charges will be applicable in case of no show.</p>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default panel-bg web-design">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse5">
                            <i class="fa fa-circle"></i>Text 6                
                            </a>
                        </div>
                    </div>
                    <div id="collapse5" class="panel-collapse collapse">
                        <div class="panel-body">
                            <p>You can mention your discount code when placing the order on the website or mobile app. As per the applicability & terms of the discount coupon, discount amount will be deducted from the total amount. Please note multiple discount coupons cannot be applied on the same order or with any other discounts offered to customers.</p>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default panel-bg web-design">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse6">
                            <i class="fa fa-circle"></i> Text 7           
                            </a>
                        </div>
                    </div>
                    <div id="collapse6" class="panel-collapse collapse">
                        <div class="panel-body">
                            <p>You can mention your discount code when placing the order on the website or mobile app. As per the applicability & terms of the discount coupon, discount amount will be deducted from the total amount. Please note multiple discount coupons cannot be applied on the same order or with any other discounts offered to customers.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </article>
 </div>
</div>