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

Question

我有以下div block

        <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>

我想在单击以下按钮时显示此 block 。

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

我有以下脚本来显示 block

$(".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;
    }

问题是当我单击按钮时， block 显示并立即隐藏。我错过了什么？？

Answer 1

让你的按钮type="button"。当前您的按钮 正在提交页面。因此它以默认状态显示页面。

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