javascript - 如何在 JQuery 中切换选项卡

Question

我正在尝试创建一个选项卡式内容区域，用于打开和关闭每个部分。我的 HTML 如下:

<a href="" class="toggle"></a>
<div class="more-info">
    <p>HELLO</p>
</div>

<a href="" class="toggle"></a>
<div class="more-info">
    <p>GOODBYE</p>
</div>

JQuery 是

    $("a.toggle").click(function () {
        $(this).find(".more-info").slideToggle("slow");
    });

我的风格是:

a.open {display:block; width:30px; height:30px; background:#999;}
.more-info {display:none; width:100%;}

这个想法是单击链接并打开其内容框。我该怎么做呢？似乎不起作用？唯一的问题是我不能使用唯一 ID 作为创建页面的方式。因此，这必须适用于泛型类。

Answer 1

您需要向下滑动所需的部分，并向上滑动任何当前打开的部分。

尝试:

$("a.toggle").on('click', function (e) {
    e.preventDefault();
    var $section = $(this).next(".more-info").slideDown("slow");
    $(".more-info").not($section).slideUp("fast");
});