在前端开发中，经常会使用到 jQuery 的切换效果（toggle）。然而，默认情况下，这些效果是显示的。本篇文章将介绍如何通过 jQuery 将切换效果的默认状态设置为隐藏。
使用 .hide() 方法
jQuery 提供了一个 .hide() 方法，它可以将元素隐藏起来。我们可以在页面加载完成后，使用该方法将需要切换的元素先隐藏起来。
$(document).ready(function() {
$("#toggle-button").hide();
});上述代码表示，在文档加载完成后，将 id 为 "toggle-button" 的元素隐藏起来。这样，当用户点击该按钮时，它就会显示出来。
使用 .toggle() 方法
除了 .hide() 方法，jQuery 还提供了一个 .toggle() 方法，它可以在隐藏和显示之间切换元素。我们可以通过调用一次该方法将元素默认设置为隐藏状态。
$(document).ready(function() {
$("#toggle-button").toggle();
});上述代码表示，在文档加载完成后，将 id 为 "toggle-button" 的元素切换为隐藏状态。这样，当用户点击该按钮时，它就会显示出来。
示例代码
以下是示例代码，包括 HTML 和 jQuery 部分。你可以将其复制粘贴到任意 HTML 文件中并运行。
-- -------------------- ---- ------- --------- ----- ------ ------ -------------- ------------------ -------- ----------------------------------------------------------- -------- ----------------------- ------------------------------ - -- --------------------------- -- ---- --------- ----- ---------- ------- ------ -------- ------------------------------- ------- -------
总结
本篇文章介绍了如何通过 jQuery 将切换效果的默认状态设置为隐藏。我们可以使用 .hide() 或 .toggle() 方法来实现这个目标。通过本文的学习，相信读者已经掌握了如何在前端开发中使用 jQuery 实现该功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27733