javascript - 如何在一次点击时隐藏一个 div 并在另一次点击时取消隐藏它？

Question

我想在我的 javascript 中添加一个 else 语句，目前如果用户单击一个链接然后 div 隐藏，但我想要它以便如果他们再次单击该链接 div 取消隐藏。有人可以告诉我怎么做吗谢谢？

<a id="myLink" href="javascript:void(0)" onclick="javascript:myLinkButtonClick();"><h3 id="bobcontent1-title" class="handcursor"><img src="assets/img/help_support/howdo.png" width="302" height="45" /></a>

<script>
function myLinkButtonClick()
{
    $(".nswp-frame2").hide();
}
</script>

Answer 1

既然你似乎在使用 jQuery，你可以简单地使用 toggle() 方法。

例如:

$('#myLink').on('click', function() {
    $(".nswp-frame2").toggle();
});

toggle() 方法可互换地显示和隐藏元素，具体取决于元素当前是可见还是隐藏。

作为旁注，请注意此示例如何以不显眼的方式使用 on() 方法将处理程序绑定(bind)到 click 事件，而不是显眼的(内联) 示例中的代码。这也意味着该片段应该是单独脚本声明的一部分，最好在页面加载后执行。所以一个更完整的例子是:

<script type="text/javascript">
    $(document).ready(function() {
        $('#myLink').on('click', function() {
            $(".nswp-frame2").toggle();
        });
    });
</script>