Javascript JQuery show（）方法未按预期工作

我有下面的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>

.score描述类的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;
    }

问题是，当我单击按钮时，会显示块并立即隐藏。我遗漏了什么？？？

尝试

toggle（）

---

制作您的按钮

type=“button”

。当前您的

按钮正在提交页面。因此，它以默认状态显示页面

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


分数描述

OP的代码可以正常工作，因此这是唯一符合逻辑的答案+1@RoryMcCrossan是代码很好，只有按钮产生了问题
.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;
    }

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

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