Bootstrap 关闭 div 框答案

【问题标题】：Bootstrap close div boxBootstrap 关闭 div 框
【发布时间】：2015-10-15 23:34:36
【问题描述】：

大家好，我刚开始学习 bootstrap，

我想为 div 框制作关闭按钮，我有此代码，但 X 按钮不起作用：

<div class="panel panel-default">
    <table class="table table-hover">
        <thead>
            <tr style="background-color: lavender;">
                <th><button type="button" class="btn btn-primary btn-xs">Share</button></th>
                <th><a href="#" class="close" data-dismiss="panel" aria-label="close" id="hide">&times;</a></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Manchester United - Manchester United</td>
                <td>2 - 1</td>
            </tr>
            <tr>
                <td>FC Barcelona - Manchester</td>
                <td>T1 2+p.p</td>
            </tr>
            <tr>
                <td>Manchester United - Manchester United</td>
                <td>2 - 1</td>
            </tr>
            <tr>
                <td>FC Barcelona - Manchester United</td>
                <td>2 - 1</td>
            </tr>
            <tr style="background-color: lightgreen;">
                <th>Bet: 2100</th>
                <th>Win: 55864</th>
            </tr>
        </tbody>
    </table>
</div>

这里是 JavaScript：

$(document).ready(function() {
    $("#hide").click(function(){
        $("panel").hide();
    });
});

【问题讨论】：

$(".panel") 改为

标签： javascript html css twitter-bootstrap

【解决方案1】：

您必须为 div class="panel" 设置一个 ID，并将此 ID 设置在一个 href=#id 中。然后将 data-dismiss="modal" 更改为 data-dismiss="panel" 即可删除 javascript 代码。

你可以在这里查看 https://jsfiddle.net/foyckLaf/

<div class="panel panel-default" id="current-pane">
<table class="table table-hover">
    <thead>
        <tr style="background-color: lavender;">
            <th><button type="button" class="btn btn-primary btn-xs">Share</button></th>
            <th><a href="#current-pane" class="close" data-dismiss="alert" aria-label="close" id="hide">&times;</a></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Manchester United - Manchester United</td>
            <td>2 - 1</td>
        </tr>
        <tr>
            <td>FC Barcelona - Manchester</td>
            <td>T1 2+p.p</td>
        </tr>
        <tr>
            <td>Manchester United - Manchester United</td>
            <td>2 - 1</td>
        </tr>
        <tr>
            <td>FC Barcelona - Manchester United</td>
            <td>2 - 1</td>
        </tr>
        <tr style="background-color: lightgreen;">
            <th>Bet: 2100</th>
            <th>Win: 55864</th>
        </tr>
    </tbody>
</table>
</div>

【讨论】：

【解决方案2】：

没有panel元素，你需要.panel：

$(".panel").hide();

panel 对应于 <panel></panel> 元素，显然您的代码中没有。

【讨论】：