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