切换显示/隐藏 (jQuery)答案

【问题标题】：Toggle show/hide (jQuery)切换显示/隐藏 (jQuery)
【发布时间】：2017-07-10 15:20:03
【问题描述】：

已经有很多关于这个主题的帖子，但没有一个直接解决我的问题。这是我目前的设置：

我有一个 ID 为 #ptwesv 的 div；

另一个包含我要显示的内容的 div 隐藏 ID #ptwest。

我使用的 jQuery 是这样的：

<script>
jQuery("#ptwesv").click(function(){
    jQuery("#ptwest").show();
});
jQuery("#ptwesv").click(function(){
    jQuery("#ptwest").hide();
});
</script>

这会在单击时正确隐藏 #ptwest 容器，但是当我再次单击触发元素 (#ptwesv) 时不会显示容器。我认为这是因为一旦元素被隐藏，再次单击触发器会导致操作相互对抗。

我使用this W3 示例作为参考，我注意到的唯一显着不同是显示/隐藏有不同的触发元素。

是否可以从单个 div 触发元素的显示/隐藏，我怎样才能让它工作？

【问题讨论】：

jQuery("#ptwest").toggle()
当您设置第二个点击事件时，您将覆盖您的第一个点击事件。到目前为止，所有给出的答案都有效。

标签： javascript jquery

【解决方案1】：

jQuery("#ptwesv").click(function(){
    jQuery("#ptwest").toggle();
});

是你想要的方式。它切换元素。因此，如果显示它会隐藏，反之亦然。

此时该元素将始终隐藏，因为两次相同的点击元素。

【讨论】：

【解决方案2】：

因为Id 对于整个文档是唯一的。试试toggle()

jQuery("#ptwesv").click(function(){
    jQuery("#ptwest").toggle();
});

【讨论】：

Ahhhh 我的答案是一样的，而且是 1 分钟前.. :(
我不会使用 .toggle() - 如果用户足够快地点击相同的元素，jQuery 切换会失败，你最终会得到混合的结果。我总是将 .show() 和 .hide() 与存储元素当前状态的布尔值结合使用。（如果在调用监听器时显示或隐藏）。
@RickBronger 啊哈，我没注意到，投票即将到来 :)

【解决方案3】：

toggle() 方法在选中元素的 hide() 和 show() 之间切换。

此方法检查所选元素的可见性。如果元素被隐藏，则运行 show()。如果元素可见，则运行 hide() - 这会产生切换效果。

   $("#ptwesv").click(function(){
       $("#ptwest").toggle();
   });

【讨论】：