javascript - 使用 JQuery 单击时不显示 Div(CSS - block /无)

Question

我希望这样当我点击 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 具有 display:none 的 CSS 属性。

我试过 $('#headerrightside').show() 但这似乎不起作用。我怎样才能让它工作？谢谢!!

Answer 1

点击事件函数有一个错字，带有一个额外的 )。

$('#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>