jQuery的手风琴图像

我想包括箭头图标进入我的手风琴...... 我不知道如何写CSS的这个组合图像这里是我的形象联系http://code.jquery.com/ui/1.9.1/themes/base/images/ui-icons_454545_256x240.png jQuery的手风琴图像

这里是我的js代码

http://jsfiddle.net/Uf7Nj/3/

/*! 
* Vallenato 1.0 
* A Simple JQuery Accordion 
* 
* Designed by Switchroyale 
* 
* Use Vallenato for whatever you want, enjoy! 
*/ 

$(document).ready(function() 
{ 
    //Add Inactive Class To All Accordion Headers 
    $('.accordion-header').toggleClass('inactive-header'); 

    //Set The Accordion Content Width 
    var contentwidth = $('.accordion-header').width(); 
    $('.accordion-content').css({'width' : contentwidth }); 



    // The Accordion Effect 
    $('.accordion-header').click(function() { 
     if($(this).is('.inactive-header')) { 
      $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content'); 
      $(this).toggleClass('active-header').toggleClass('inactive-header'); 
      $(this).next().slideToggle().toggleClass('open-content'); 
     } 

     else { 
      $(this).toggleClass('active-header').toggleClass('inactive-header'); 
      $(this).next().slideToggle().toggleClass('open-content'); 
     } 
    }); 

    return false; 
});

来源

2012-11-21 user1828505

@Scorpio洛尔石器时代在这里？ –

@Scorpio：但在这里他们已经使用完整的图像http://jqueryui.com/accordion/ – user1828505

只提取所需的图标位置jquery-ui css：

CSS：

.ui-icon { 
    width: 16px; 
    height: 16px; 
    background-image: url("http://code.jquery.com/ui/1.9.1/themes/base/images/ui-icons_454545_256x240.png"); 
} 
       

         
.ui-icon-arrowthick-1-n { background-position: 0 -48px; } 
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; } 
.ui-icon-arrowthick-1-e { background-position: -32px -48px; } 
.ui-icon-arrowthick-1-se { background-position: -48px -48px; } 
.ui-icon-arrowthick-1-s { background-position: -64px -48px; } 
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; } 
.ui-icon-arrowthick-1-w { background-position: -96px -48px; } 
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; } 
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; } 
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } 
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } 
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }

sample

获得图标的名称去theme rolling page 悬停在您需要的图标，打开css文件，找到图标有一个名字，复制代码你的新CSS。

来源

2012-11-21 03:58:15

我看到只有一个图像是否可以包含两个不同的图像 – user1828505

你是指两个不同的图标？ –

耶两个不同的图标 – user1828505

jQuery的手风琴图像

回答

相关问题