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

nkoocmlb 于 2022-11-27 发布在 Java

关注(0)|答案(2)|浏览(184)

我一直在搜索扩展/折叠菜单脚本（因为到目前为止我只能做"扩展"而不能折叠），发现了一个我感兴趣的脚本。
不过，当我在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>

JavaScript

来源：https://stackoverflow.com/questions/24385900/expand-collapse-faq-with-jquery

2条答案

按热度按时间

sxpgvts31#

下面是工作的代码

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

没有什么特别的，如果不工作更新您的浏览器以及。

赞(0）回复(0）举报 2022-11-27

e0bqpujr2#

参考此站点。使用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>

赞(0）回复(0）举报 2022-11-27

我来回答

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

2条答案

相关问题

热门标签

最新问答