我试图创建一个类似于Q/a的页面，但是我的代码有一些问题。我觉得这很明显，但我看不出来。
<html>
<head>
<title> Q/A </title>
<style>
#faqs dt, #faqs dd { padding: 0 0 0 50px }
#faqs dt { font-size:1.5em; color: #9d9d9d; cursor: pointer; height: 37px; line- height: 37px; margin: 0 0 15px 25px}
#faqs dd { font-size: 1em; margin: 0 0 20px 25px}
#faqs dt { background-color: red;) }
#faqs .expanded { background-color: blue;)}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<script type="text/javascript">
$("#faqs dd").hide();
$("#faqs dt").click(function () {
$(this).next("#faqs dd").slideToggle(500);
$(this).toggleClass("expanded");
});
</script>
<dl id="faqs">
<dt>Question 1</dt>
<dd>Answer 1</dd>
<dt>Question 2</dt>
<dd>Answer 2</dd>
<dt>Question 3</dt>
<dd>Answer 3</dd>
</dl>
</body>
</html>
谢谢！
最佳答案
使用.next("dd")而不是.next("#faqs dd")并将代码包装到就绪处理程序中：
$(document).ready(function(){
$("#faqs dd").hide();
$("#faqs dt").click(function () {
$(this).next("dd").slideToggle(500);
$(this).toggleClass("expanded");
});
});
关于javascript - Q/A使用jQuery隐藏答案||元素不隐藏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24501854/