簡體   English   中英

引導式手風琴無法在其中使用表格

[英]bootstrap accordion not working with table inside it

我有三個手風琴。 在我的一部手風琴中,我有一張桌子。 作為自舉式手風琴的行為,一次只能打開一個。 從我將其放入頁面開始,它就沒有相應地工作。 我花了一整天的時間為它尋找解決方案,最后我想到在這里提出問題,而當我寫問題標題時,我發現了一條建議,說明數據表中的手風琴問題。 我立刻評論了我的桌子和現在的手風琴作品。 有人對此有所了解嗎,因為我需要在手風琴內放一張桌子。

這是我的HTML:

<div class="panel-group" id="accordian1">
                        <div class="panel panel-danger">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a role="button" data-toggle="collapse" data-parent="#accordian1" href="#collapseOne">
                                        Cost
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseOne" class="panel-collapse in">
                                <div class="panel-body" style="text-align:justify;">
                                    <p>some textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome text</p>

                                </div>
                            </div>
                        </div>
                        <div class="panel panel-danger">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordian1" href="#collapseTwo">
                                        some text
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse">
                                <div class="panel-body" style="text-align:justify;">

                                    <p>some textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome text</p>

                                    <div class="table-responsive">
                                        <table class="table table-bordered table-hover table-striped">
                                            <thead>
                                                <tr>
                                                    <th>some text</th>
                                                    <th style="width: 171px;">some text</th>
                                                    <th>some text</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>some text</td>
                                                    <td>some textsome text</td>
                                                    <td>
                                                        <p>some textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome text</p>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>some text</td>
                                                    <td>some textsome text</td>
                                                    <td>some textsome textsome text</td>
                                                </tr>
                                                <tr>
                                                    <td>some text</td>
                                                    <td>some text</td>
                                                    <td>
                                                        <p>some textsome textsome textsome textsome textsome textsome textsome text</p>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-danger">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordian1" href="#collapseThree">
                                        Job Prospect
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseThree" class="panel-collapse collapse">
                                <div class="panel-body" style="text-align:justify;">
                                    <p>some textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome text</p>
                                    <p>some textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome text.</p>

                                    <b>some text bbbbb</b><br />
                                    <p>some textsome textsome textsome textsome textsome text.</p>
                                </div>
                            </div>
                        </div>
                    </div>

您的代碼非常適合我。 你可以試試

  1. 為此創建具有所有引導程序庫鏈接的單獨文件進行測試。
  2. 通過在Mozilla Firefox中安裝Firebug,檢查腳本中是否存在Javascript錯誤。

在此處輸入圖片說明


您的桌子在手風琴上絕對好用! 確保正確加載了jquery和bootstrap腳本

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM