在jQuery中切换隐藏/显示_jquery显示隐藏切换-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_63639281/article/details/127016708

这篇博客介绍了如何使用jQuery的toggle()方法以及hide()和show()方法来切换HTML元素的隐藏和显示状态。toggle()方法在早期版本中可能引发双击事件问题，但在最新版本中仍有其简洁的用途。文中提供了两个示例代码，展示了如何通过点击事件来控制元素的可见性。当toggle()方法不再适用时，可以使用条件语句结合hide()和show()来实现相同功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用jQuery的toggle()方法来切换隐藏/显示使用jQuery的切换()方法来切换隐藏/显示

在 toggle() 方法的用例中，我们通常通过 click 事件触发它。同样，在该方法的实现中，还有另一个 click 事件以及 preventDefault()。

因此，它使双击事件无效，并且应该可以正常工作。但是该方法过于直接，如果事件被调用超过两次，通常会导致问题。

所以，为了摆脱这种模棱两可的特点，后来，该方法被删除了。然而，它仍然被视为用于显式，它可以用更少的代码行而不是以任何其他方式使用。

让我们看一下用于演示该函数的代码。

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
  $("#ele1").click(function(){
    $("#ele2").toggle(1500);
  });
});
</script>
</head>
<body>
<p id='ele2'>Content to be toggled.</p>
<button id='ele1'>Show / Hide</button>

使用hide()和show()方法切换隐藏/显示使用Hide()和Show()方法切换隐藏/显示

在这里，我们将启动 click 事件的实例，然后生成一个条件语句来检查单击按钮时内容是否可见。如果它驱动到一个真实案例，我们将其设置为 hide()；否则，我们将其设置为 show()。

让我们检查代码块并检查过程。

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
  $("#ele1").click(function(){
    var x = $('#ele2');
    if(x.is(':visible')){
      x.hide("slide");
    }
    else{
      x.show("slide");
    }

  });
});
</script>
</head>
<body>
<p id='ele2'>Content to be toggled.</p>
<button id='ele1'>Show / Hide</button>