javascript - jQuery Accordion - 一次打开一个

Question

我有一个 Accordion ，当 Accordion 打开和关闭时，+ 和 - 图像可以工作。我正在努力让它一次只允许打开一个。

(function ($) {
    $.fn.accordions = function (options) {
        return this.each(function () {
            var titleBar = $('.title', this),
                content = $('.content', this),
                img = $('<span class="arrow" />'),
                isClosed = content.hasClass('content');

            img.addClass((isClosed) ? 'upArrow' : 'downArrow');

            titleBar.append(img).on('click', function () {
                var parent = $(this).parents('.accordion'),
                    arrow = $('.arrow', this),
                    content = $('.content', parent);

                $(this).toggleClass('no-border');
                if (arrow.hasClass('upArrow')) {
                    content.slideDown(500);
                    arrow.removeClass('upArrow').addClass('downArrow');
                } else {
                    content.slideUp(500);
                    arrow.addClass('upArrow').removeClass('downArrow');
                }
            });
        });
    };

}(jQuery));

<script type="text/javascript">
$(function() { 
    $('.accordion').accordions()
});
</script>

下面是 HTML。

<div class="accordion">
  <div class="title">
       Title goes here
  </div>
  <div class="content">
           Content here
  </div>
</div>

Answer 1

对于自己编写的 Accordion ，实现此目的的最佳方法是执行以下步骤:

1. 点击事件时关闭所有内容字段
2. 通过 $(this) 获取对元素的引用
3. 打开您点击的内容字段

编辑:如果有可能，请使用 jQuery UI 和 Accordion Widget .