Question

我自己没有写这个代码，但大学已经让我帮忙解决问题。我对谷歌的看法并不多，所以我想在这里试一试。

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();

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

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

Answer 1

在过滤和隐藏/显示后，它与存储在accordion var中的内容有关。你想要实现的目标实际上可以在不调用.show

的情况下实现

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

Answer 2

问题是你是使用slice方法过滤元素，最后手风琴是一个jQuery对象，它只有1个选中元素，而不是所有手风琴元素，你可以使用{{ 1}}方法：

end

或：

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

Answer 3

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

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

jquery内容隐藏/显示面板

3 个答案: