1

我自己没有编写此代码，但一所大学要求我帮助解决问题。我对谷歌没有太多关注，所以我想在这里试一试。

function($) {
 var accordion = $('dl > dd').hide().slice(0, 1).show();

 $('dl > dt > a').click(function() {
 accordion.slideUp();
 if($(this).parent().next().is(':hidden'))
 { 
   $(this).parent().next().slideDown();
 }
 return false;
});
})(jQuery);

此代码应该打开和关闭页面上的面板。

如果我们改变这一行

 var accordion = $('dl > dd').hide().slice(0, 1).show();

到这条线

 var accordion = $('dl > dd').hide();

一切正常，但我们希望第一个面板在页面加载时显示。

使用打开面板时的代码，打开的面板不会关闭。

4

3 回答 3

1

这将是我对手风琴的实现。

CSS

<style type="text/css">
    dd {
        display: none;
    }
</style>

HTML

<dl>
    <dt><a href="#">Slide1</a></dt>
    <dd>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </dd>
    <dt><a href="#">Slide2</a></dt>
    <dd>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </dd>
    <dt><a href="#">Slide3</a></dt>
    <dd>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </dd>
</dl>

jQuery

(function ($)
    {
        var accordionTitle = $('dl > dt > a'),
            accordionSlide = $('dl > dd');

        accordionTitle
            .first()
            .addClass('active')
            .parent()
            .next()
            .slideDown();

        accordionTitle.click(function (e)
        {
            e.preventDefault();

            if (!$(this).hasClass('active'))
            {
                accordionSlide.slideUp();

                $(this).parent().next().stop().slideToggle();

                accordionTitle.removeClass('active');
                $(this).addClass('active');
            }
        });
    })(jQuery);
于 2013-01-25T14:21:38.467 回答
1

这与过滤和隐藏/显示后存储在手风琴变量中的内容有关。您想要实现的目标实际上可以在不调用 .show 的情况下实现

var accordion = $('dl > dd');
accordion.not(':first').hide();
于 2013-01-25T13:24:20.033 回答
1

问题是您正在使用slice方法过滤元素，最后手风琴是一个 jQuery 对象，它只有 1 个选定元素，而不是所有手风琴元素，您可以使用end方法：

var accordion = $('dl > dd').hide().first().show().end();

或者：

var accordion = $('dl > dd').hide(); 
accordion.first().show();
于 2013-01-25T13:24:32.280 回答