Question

我一直在搜索扩展/折叠菜单脚本（因为我迄今为止只能“扩展”而没有崩溃），并找到了一个让我感兴趣的东西。这是a link

但是，当我使用jQuery时，我只看到了文本[到目前为止]（http://scr.hu/0z5b/iajxi ）

当我使用其他脚本时，它有效（但它仍然不包括在FAQ中折叠）。

任何人都可以帮助我吗？

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>

Answer 1

这是有效的代码

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

无需做任何特别的事情，如果不能正常更新您的浏览器。

Answer 2

请参阅此网站。使用jqueryUI accordion可以获得相同的功能。

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>

使用jquery展开/折叠FAQ

2 个答案: