我们经常会遇到点击某个选项，出现相应选项内容的情况，该如何实现这种功能呢？有以下几个方法：
第一种方法：
用原生js和display：none来实现，给每一个选项绑定一个click事件，click事件用if、else判断，被选中了，就让display：block，没被选中就选display：none。
具体实现如图：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.code{
display: none;
}
</style>
<body>
<div><input type="radio" name="sname" onClick="SenFe_Code(this,SenFe_1)">标题一</div>
<div id="SenFe_1" class="code">提示内容一</div>
<div><input type="radio" name="sname" onClick="SenFe_Code(this,SenFe_2)">标题二</div>
<div id="SenFe_2" class="code">提示内容二</div>
<script>
function SenFe_Code(sname,id){
if(sname.checked){
id.style.display = "block";
}else{
id.style.display = "none";
}
}
</script>
</body>
</html>
但是这段代码存在一个很明显的问题，如果选中之后再点击一次，应该时取消选中，但是这段代码无法实现这个功能，如何实现呢？可以再在script中加上一段代码：
$(':radio').click(function () {
var r = $(this).attr("name");
$(":radio[name=" + r + "]:not(:checked)").attr("tag", 0);
if ($(this).attr("tag") == 1) {
$(this).prop('checked',false);
$(this).attr("tag", 0);
}
else {
$(this).attr("tag",1);
}
});
如图：
但是加上这段代码后仍然存在一个问题：取消选中后，选项对应内容并没有收起来，如何收起来呢？
当被选中元素的checked值为false时，让相应id内容的css设置成display：none即可收起内容。
在$(this).prop('checked',false)的后面加上.$('#id').css("display","none");或者是.$('#id').toggle();均可。
网友评论