使用 jquery 展开/折叠常见问题解答答案

【问题标题】：Expand/collapse FAQ with jquery使用 jquery 展开/折叠常见问题解答
【发布时间】：2014-08-14 16:08:18
【问题描述】：

我一直在搜索展开/折叠菜单脚本（因为到目前为止我只能“展开”而不折叠）并找到了一个我感兴趣的脚本。这里是a link

不过，当我将它与 jQuery 一起使用时，我只看到了文本 [到目前为止](http://scr.hu/0z5b/iajxi )

当我使用其他脚本时，它可以工作（但它仍然不包括常见问题解答中的折叠）。

谁能帮帮我？

Ofc 脚本

<dl> <dt>Question One</dt> <dd>first answer to question one</dd> <dd>second answer to question one</dd> <dt>Question two</dt> <dd>first answer to question two</dd> <dd>second answer to question two</dd> <dt>Question three</dt> <dd>first answer to question three</dd> <dd>second answer to question three</dd> </dl>

到目前为止，jquery：

<script>
$('dd').hide();$('dt').click(
function() {
    var toggle = $(this).nextUntil('dt');
    toggle.slideToggle();
    $('dd').not(toggle).slideUp();
});
</script>

【问题讨论】：

有什么问题？对我来说工作得很好jsfiddle.net/4pC3e/12
想说同样的话，但我只能看到文字 scr.hu/0z5b/iajxi 无法点击文字，或者即使我这样做了 - 什么也没有发生。就像，我知道这段代码适用于 jsfiddle，但不适用于我的页面。不知道为什么。
@user3770730，通过使用 JqueryUI，您可以使用此处记录的手风琴 jqueryui.com/accordion 。它非常简单易用。
@user3770730 将其放入 document.ready jsfiddle.net/4pC3e/13

标签： javascript jquery collapse

【解决方案1】：

参考这个网站。使用 jqueryUI 手风琴可以实现相同的功能。

http://api.jqueryui.com/accordion/

编辑过的文件

                <!DOCTYPE html>
            <head>
            <title>Title</title>
            <script src="js/jquery.min.js"></script>
            <script>
            $("document").ready(function()
            {
            $('dd').hide();
            $('dt').click(function()
            {
            var toggle = $(this).nextUntil('dt');
            toggle.slideToggle();
            $('dd').not(toggle).slideUp();
            });
            });
            </script>
            </head>
            <body>
            <dl>
            <dt>Question One</dt>
            <dd>first answer to question one</dd>
            <dd>second answer to question one</dd>
            <dt>Question two</dt> 
            <dd>first answer to question two</dd>
            <dd>second answer to question two</dd>
            <dt>Question three</dt>
            <dd>first answer to question three</dd>
            <dd>second answer to question three</dd>
            </dl>

            </body>
            </html>

【讨论】：

【解决方案2】：

这是有效的代码

 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('dd').hide();
$('dt').click(function() {
var toggle = $(this).nextUntil('dt');
toggle.slideToggle();
$('dd').not(toggle).slideUp();
});
});
</script>
<dl>
    <dt>Question One</dt>
    <dd>first answer to question one</dd>
    <dd>second answer to question one</dd>
    <dt>Question two</dt>
    <dd>first answer to question two</dd>
    <dd>second answer to question two</dd>
    <dt>Question three</dt>
    <dd>first answer to question three</dd>
    <dd>second answer to question three</dd>
</dl>

没什么特别的，如果不行也更新你的浏览器。

【讨论】：

大家好，谢谢大家的回复；感谢手风琴页面（我真的会向他们学习），但最感谢 Zahid 的这个脚本。是的，它奏效了，但我必须承认我只是愚蠢。我的浏览器只是阻止了一些 javascript，所以有些工作 - 有些没有。刚刚清理了饼干和其他东西，然后它又能正常工作了。再次感谢，你们比博尔特快。 :)