Q / A使用jQuery隐藏答案|| 元素不隐藏

Question

I'm trying to create a Q/A like page, but I'm having a couple problems with my code. 我正在尝试创建一个类似Q / A的页面，但是我的代码有一些问题。 I think it's something incredibly obvious but I can't spot it. 我认为这很明显，但我无法发现。

<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>

Thanks! 谢谢！

Answer 1

Use .next("dd") instead of .next("#faqs dd") and wrap your code inside ready handler: 使用.next("dd")而不是.next("#faqs dd")然后将代码包装在ready处理程序中：

$(document).ready(function(){
    $("#faqs dd").hide();
    $("#faqs dt").click(function () {
        $(this).next("dd").slideToggle(500);
        $(this).toggleClass("expanded");
    });
});

Answer 2

this is very simple! 这很简单！

Just add a CSS property display:none in your style script 只需在样式脚本中添加CSS属性display:none

#faqs dd { font-size: 1em; margin: 0 0 20px 25px; display:none}

Please add your jQuery script in document ready function 请在文档准备功能中添加您的jQuery脚本

$("#faqs dd").hide();
$("#faqs dt").click(function () {
    $(this).next("#faqs dd").slideToggle(500);
    $(this).toggleClass("expanded");
});

});

Working jsfiddle link 工作jsfiddle 链接

Q / A使用jQuery隐藏答案|| 元素不隐藏

问题描述

2 个解决方案

解决方案1
3 已采纳 2014-07-01 03:00:09

解决方案2
0 2014-07-01 03:00:02

Q / A使用jQuery隐藏答案|| 元素不隐藏

问题描述

2 个解决方案

解决方案1 3 已采纳 2014-07-01 03:00:09

解决方案2 0 2014-07-01 03:00:02

解决方案1
3 已采纳 2014-07-01 03:00:09

解决方案2
0 2014-07-01 03:00:02