javascript - 简单的 Accordion 定位

Question

我在弄清楚如何使用 JavaScript 来定位网站设计中的某个项目时遇到问题。

我正在创建一个简单的 Accordion :

    $(function($) {
        var allPanels = $('.accordion > dd').hide();
        $('.accordion > dd:nth-child(2)').show();
        $('.accordion > dt > a').on('click', function() {
            allPanels.slideUp('fast');
            $(this).parent().next().slideDown('fast');
        return false;
        });
    });

我更愿意做的是，我不想告诉“.next()”向下滑动，而是想定位我的标签之一“4 个标签”，就像第 n 个 child 一样，但是通过从单击的标签。这是我的 html 代码，澄清一下:

    <dl class="accordion">
        <dt><a href="">Linked element 1</a></dt>
        <dt><a href="">Linked element 2</a></dt>
        <dt><a href="">Linked element 3</a></dt>
        <dt><a href="">Linked element 4</a></dt>
        <dd>Linked element 1 - dropdown content</dd>
        <dd>Linked element 2 - dropdown content</dd>
        <dd>Linked element 3 - dropdown content</dd>
        <dd>Linked element 4 - dropdown content</dd>
    </dl>

Answer 1

试试这个:

var allPanels = $('.accordion > dd').hide();
$('.accordion > dd:eq(1)').show();
$('.accordion > dt > a').on('click', function () {
    allPanels.slideUp('fast');
    $('.accordion dd').eq($('.accordion dt a').index(this)).slideDown('fast');
    return false;
});

<强> jsFiddle example