javascript - 使用JQuery单击时未显示Div(CSS-阻止/无)

我想要它，所以当我单击Bootstrap Glyphicon时会显示一个div。
我目前有这个HTML（简体）：

<span id="headerdisplaybuttonsxs" class="glyphicon glyphicon-menu-hamburger"> </span>
<div id="headerrightside" class="col-xs-12 col-sm-4"> text... </div>

然后这个JS：

$('#headerdisplaybuttonsxs').click(function()) {
    $('#headerrightside').css("display", "block");
});

因此，我基本上希望#headerrightside在单击#headerdisplaybuttonsxs时显示。问题是我无法正常工作。

#headerdisplaybuttonsxs的CSS属性为display:none。

我已经尝试过$('#headerrightside').show()，但这似乎不起作用。我怎样才能使它工作？谢谢！！

最佳答案

click event函数上有一个错字，并带有一个额外的）。

$('#headerdisplaybuttonsxs').click(function() {
    $('#headerrightside').css("display", "block");
});

#headerrightside {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="headerdisplaybuttonsxs" class="glyphicon glyphicon-menu-hamburger">Icon</span>
<div id="headerrightside" class="col-xs-12 col-sm-4"> text... </div>