JQuery show()方法没有按预期工作

Question

我有以下div块

        <div class="score-description col-sm-3">
            <table class="table table-striped">
                <thead>
                   <th> Score
                   </th>
                   <th> Description
                   </th>
                </thead>
                <tr>
                    <td>0</td>
                    <td>Poor</td>
                       ...
                       ...
                </tr>
            </table>

        </div>

单击以下按钮时,我想显示此块.

<Button class="btn btn-warning show-score-description-button">
     Score Descriptions
</Button>

我有以下脚本来显示块

$(".show-score-description-button").click(function(){
       $(".score-description").show();
})

.score-description类的css是

.score-description{
        position: fixed;
        z-index: 1;
        overflow: scroll;
        margin-top:-100px;
        height: 50%;
        margin-left: 7%;
        margin-top: 5%;
        background-color: #ffffff;
        display: none;

    }
    .score-description table th{
        border: 2px solid #aaaabb;
    }
    .score-description table td{
        border: 2px solid #aaaabb;
    }

问题是,当我单击按钮时,块显示并立即隐藏.我错过了什么？

Answer 1

按下你的按钮type="button".目前您button正在提交该页面.因此它显示页面处于默认状态.

<Button type="button" class="btn btn-warning show-score-description-button">
 Score Descriptions