Question

我遇到了如何使用JavaScript确定如何在我的网站设计中定位某个项目的问题。

我正在创作一个简单的手风琴：

    $(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个孩子一样，但是通过测量来自点击标签。这是我的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

简单的手风琴定位

1 个答案: