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

Q/A hide answers using jquery || elements not hiding

本文关键字：隐藏 jquery 元素 答案      更新时间：2023-09-26

我试图创建一个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")，并将代码包装在ready handler中:

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

这很简单!

在样式脚本中添加一个CSS属性display:none 

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

请在document ready函数中添加jQuery脚本

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

相关文章：