jquery - Accordion 风格内容

Question

我已经成功制作了一个 Accordion ，当您单击标题时它会打开和关闭。我的问题是我不知道如何做到一次只能打开一个部分。因为就像现在一样，他们只是不断打开然后离开页面。是否可以做到这样，当打开一个并单击另一个时，新的打开而旧的关闭？

这是jfiddle http://jsfiddle.net/oxjhva6a/

代码遵循以下模式:

$('#accordianhead1').toggle(
    function () {
        $('#accordianbody1').animate({
             height: "110"
        }, 500);
        $('#open1').hide();
        $('#close1').show();
    },
    function () {
        $('#accordianbody1').animate({
             height: "0"
        }, 500);
        $('#open1').show();
        $('#close1').hide();
    }
);

Answer 1

目前代码非常重复。相反，我会通过类获取所有元素，在您的情况下为“accordionbody”，然后隐藏所有不是您要显示的元素的元素，然后显示当前元素。

使用 $('.accordionbody') 将返回一个元素数组，您可以根据需要对其进行操作。

由此，您可以在单击时关闭所有 Accordion ，然后仅显示被单击的 Accordion 。

可以这样做:

    $(document).ready(function() {
        $('.accordianhead').on('click', function(elem) {
            console.log('running');
            $('.accordianbody').hide()
            $(elem.target).closest('.accordianhead').next().height('120px').show()
        });
    });

我为你更新了你的 plunkr

http://jsfiddle.net/oxjhva6a/2/