Question

我正在尝试创建类似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>

谢谢！

Answer 1

使用.next("dd")代替.next("#faqs dd")并将代码包装在ready handler中：

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

Answer 2

这很简单！

只需在样式脚本中添加CSS属性display:none

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

请在文档就绪函数中添加jQuery脚本

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

});

工作jsfiddle link

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

2 个答案: