使用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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)