jquery制作FAQ栏界面
发布网友
发布时间：2022-05-18 09:10
共2个回答
热心网友
时间：2022-05-18 10:39
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css">
<link rel="stylesheet" href="http:////cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa{background-color: #ddd;border-radius: 2px;padding:5px;}
dl dd{padding-left: 23px;display: none;}
dl dt{cursor: pointer;}
dl dt.dthover{background-color: green;color:#fff;}
dl dt.dthover i{color:#000;}
</style>
</head>
<body>
<dl>
<dt><i class="fa fa-plus"></i>问题1</dt>
<dd>回答1</dd>
<dt><i class="fa fa-plus"></i>问题2</dt>
<dd>回答2</dd>
<dt><i class="fa fa-plus"></i>问题3</dt>
<dd>回答3</dd>
</dl>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function(){
$("dl dt").click(function(){
$("dl dt").removeClass("dthover");
$("dl dd").hide();
$(this).addClass("dthover");
$(this).find("i").removeClass("fa-plus").addClass("fa-minus");
$(this).next("dd").show();
})
})
</script>
</body>
</html>
希望对你有用
