jQuery 切换隐藏/显示

Anika Tabassum Era 2023年1月30日 2022年7月18日
  1. 使用 jQuery 的 toggle() 方法来切换隐藏/显示
  2. 使用 hide()show() 方法切换隐藏/显示
jQuery 切换隐藏/显示

jQuery 库最大限度地减少了一堆代码的使用,并有助于使用更少的代码行解决方案。

直到 jQuery 1.8 版本,toggle() 方法被广泛使用,在 1.8 版本中,它被弃用了。在 1.9 版中,它使用不同的标记被删除。

我们将在我们的示例中讨论 toggle() 函数是如何工作的,以及为什么稍后不鼓励使用它。另一种了解切换行为解决方案的方法是使用 show()hide() 方法。

对此,我们会考虑条件语句,因此我们可以使用一个按钮来执行切换任务。让我们深入研究实例以获得更好的可视化。

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

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>

输出:

使用 jQuery 的 toggle()方法来切换

使用 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>

输出:

使用 hide() 和 show() 方法切换

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook

相关文章 - jQuery Toggle