Question

大家好，我开始学习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();
    });
});

Answer 1

您必须将Id设置为div class =“panel”并将此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>

相关：How can I dismiss a bootstrap panel using data-dismiss?

Answer 2

没有{"openid.response_nonce" "2015-07-25T09:31:45ZXrcrR0Lk35St5ESZQ0tg40PbBXU=", "openid.identity" "http://steamcommunity.com/openid/id/xxx", "openid.ns" "http://specs.openid.net/auth/2.0", "openid.op_endpoint" "https://steamcommunity.com/openid/login", "openid.mode" "id_res", "openid.sig" "zuiyNzf/QLP9Ci/czElIo1Z3nE0=", "openid.signed" "signed,op_endpoint,claimed_id,identity,return_to,response_nonce,assoc_handle", "openid.assoc_handle" "1234567890", "openid.claimed_id" "http://steamcommunity.com/openid/id/xxx", "openid.return_to" "http://localhost:3000/resp"}元素，您需要panel：

.panel

$(".panel").hide();对应panel元素，显然您的代码中没有。

Bootstrap关闭div框

2 个答案: