jQuery手风琴 - 一次打开一个

Question

当手风琴打开和关闭时，我有一个手风琴使用+和 - 图像工作。我一直在努力让它只允许一次开放。

(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

对于自编的手风琴，实现这一目标的最佳方法是执行以下步骤：

1. on click event关闭所有内容字段
2. 使用$（this）
获取对元素的引用
3. 打开您点击的内容字段

编辑：如果您有可能，请使用带有Accordion Widget的jQuery UI。