添加切换到基本jQuery手风琴的影响

Question

就像默认情况下使用HTML标记详细信息和摘要（fiddle example）提供的切换一样，我正试图进行一些切换这个基本的jQuery手风琴效果的左侧，像这样（PNG）：

到目前为止，我有这段代码：

Fiddle

HTML：

<div id="accordion">
  <h4 class="accordion-toggle">TOGGLE ONE</h4>
  <div class="accordion-content">
    <p>Cras malesuada ultrices augue molestie risus.</p>
  </div>
  <h4 class="accordion-toggle">TOGGLE TWO</h4>
  <div class="accordion-content">
    <p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
  </div>
</div>

CSS：

.accordion-toggle {cursor: pointer; margin: 0;}
.accordion-content {display: none;}
.accordion-content.default {display: block;}

JQUERY：

$(document).ready(function($) {
      $('#accordion').find('.accordion-toggle').click(function(){

        //Expand or collapse this panel
        $(this).next().slideToggle('fast');

        //Hide the other panels
        $(".accordion-content").not($(this).next()).slideUp('fast');

      });
    });

Answer 1

无论如何，这是一种方法。 （我不能说没有更好的方法。）

您可以插入<span>作为切换（<h4>）元素的第一个子项。它应该display设置为inline-block。然后可以给出宽度和高度以及背景图像。该图像将是指向右侧的箭头。

当切换打开时（即显示内容），另一个类被添加到<span>以更改箭头以指向下方。

我创建了一个包含两个图标的单个图像文件，而不是使用两个图像文件。 （我使用了您在问题中显示的箭头。）background-position样式设置用于选择图像文件中的图标。

这是两个类的CSS。 <span>元素始终具有“icon”类，但在打开时只有“icon-open”类：

.icon {
    display: inline-block;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-image: url('http://s14.postimg.org/cx1k4l135/ui_icons_222222_256x240.png');
    width: 16px;
    height: 16px;
    background-position: -32px -16px;
}
.icon-open {
    background-position: -64px -16px;
}

JQUERY：

$(function () {
    var $toggles = $('#accordion').find('.accordion-toggle');

    $toggles.click(function () {
        var $toggle = $(this),
            $content = $toggle.next(),
            $arrow = $toggle.children(':first'),
            isOpen = $arrow.hasClass('icon-open');

        $arrow.toggleClass('icon-open', !isOpen);
        $toggles.children(':first').not($arrow).removeClass('icon-open');

        $content.slideToggle('fast');
        $(".accordion-content").not($content).slideUp('fast');

    }).prepend('<span class="icon"></span>');
});

Demo on JSFiddle