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

时间:2014-01-25 01:53:32

标签: jquery

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

enter image description here

到目前为止,我有这段代码:

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

      });
    });

1 个答案:

答案 0 :(得分:2)

无论如何,这是一种方法。 (我不能说没有更好的方法。)

您可以插入<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