在前端开发过程中，经常需要对表单进行交互优化。其中一种常见的需求是根据用户选择的单选按钮来显示或隐藏其它相关内容。本文将介绍如何使用jQuery实现这种选中单选按钮下拉伸缩效果。
1. HTML结构
首先，我们需要为表单添加HTML结构。以下是一个简单的例子：
-- -------------------- ---- -------
----- ------------
---
------ -------------------- ------------ -------------- ------------------- ---------
----
---- ------------- ---------------
---------- --- ------ - ---- ---------
------
---
------ -------------------- ------------ -------------- ------------------- ---------
----
---- ------------- ---------------
---------- --- ------ - ---- ---------
------
-------这个表单包含两个单选按钮和两个相关内容块。每个单选按钮都与一个内容块相关联，并且每个内容块都被定义为初始状态隐藏。
2. CSS样式
为了使内容块能够展开和收缩，我们需要编写一些CSS样式。以下是一个简单的例子：
.hidden {
display: none;
}这个样式将所有带有“hidden”类的元素隐藏起来。
3. JavaScript代码
接下来，我们需要编写一些JavaScript代码。以下是一个使用jQuery实现选中单选按钮下拉伸缩效果的例子：
$(document).ready(function() {
$('input[type="radio"]').click(function() {
var id = $(this).attr('id');
$('.content').addClass('hidden');
$('#content' + id.substring(6)).removeClass('hidden');
});
});这个代码包含了两个主要功能：
- 当单选按钮被点击时，获取与其相应的内容块的ID。
- 将所有内容块都隐藏，并将与选中的单选按钮相关联的内容块显示出来。
4. 示例代码
最后，以下是完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-----------------------------------
-------
------- -
-------- -----
-
--------
------- -----------------------------------------------------------
--------
---------------------------- -
----------------------------------------- -
--- -- - -------------------
---------------------------------
------------ - ---------------------------------------
---
---
---------
-------
------
----- ------------
---
------ -------------------- ------------ -------------- ------------------- ---------
----
---- ------------- ---------------
---------- --- ------ - ---- ---------
------
---
------ -------------------- ------------ -------------- ------------------- ---------
----
---- ------------- ---------------
---------- --- ------ - ---- ---------
------
-------
-------
-------该代码包含了HTML表单结构、CSS样式以及jQuery脚本。在浏览器中打开该页面，并选择不同的单选按钮，即可查看效果。
5. 总结
本文介绍了如何使用jQuery实现选中单选按钮下拉伸缩效果。通过编写简单的HTML和JavaScript代码，我们可以轻松地实现这一常见的交互
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/3834