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();
})

css for .score-deScription类是

.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

Answer 2

尝试toggle()

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