jquery show / hide annoucement

Question

我希望在显示和显示隐藏时隐藏我的声明。 我做错了什么？

$("#button_announcement").click(function(){
  $('#announcement').show() ? $('#announcement').hide(300) : $('#announcement').show(300);
  //console.log(announcement);
});

控制台始终将显示值更改为“无”＃39;。 我正在尝试：

$('#announcement').css('display', 'block') ? $('#announcement').hide(300) : $('#announcement').show(300);

也不起作用。

Answer 1

您可以尝试jquery toogle功能来显示或隐藏匹配的元素。它易于使用，无需额外检查。即使您可以通过持续时间来设置过渡动画。

Answer 2

你可以使用.is（'：visible'）：

$('#announcement').is(':visible') 
    ? $('#announcement').hide(300) 
    : $('#announcement').show(300);

另一个选择是应用一个类然后使用.hasClass（）

Answer 3

正如Braj所说，只需使用其中一个切换功能。

这是错的。你的三元函数是检查$（'＃announcement'）。show（）是否为真。它总是计算为true，即显示元素的函数。你想要$('#announcement').is(':visible')

$("#button_announcement").click(function(){
  $('#announcement').is(':visible') ? $('#announcement').hide(300) : $('#announcement').show(300);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button_announcement">Toggle</button>
<div id="announcement">Hello World</div>