荣耀滑盖手机滑盖容易坏吗_灵活的滑盖式手风琴( 二 ) _顶部

The span for the arrow will beand we’ll hide it byitof the linkandit anof 0. Thewill be the itemfrom the right andin:
箭头的跨度将绝对定位，我们将其设置为在link元素外部并将其不透明度设为0，以将其隐藏。过渡将是该项从右移并淡入：
.st-accordion ul li > a span{background: transparent url(../images/down.png) no-repeat center center;text-indent:-9000px;width: 26px;height: 14px;position: absolute;top: 50%;right: -26px;margin-top: -7px;opacity:0;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.st-accordion ul li > a:hover span{opacity:1;right: 10px;}
When we open an item, we will give it the class st-open and the linkwill stay with the hover color. The span will beto that the arrow staysup and in sight:
【荣耀滑盖手机滑盖容易坏吗_灵活的滑盖式手风琴】当我们打开一个项目时，我们将其设为st-open类，并且link元素将保持悬停颜色。跨度将旋转到箭头始终指向上方并在视线内：
.st-accordion ul li.st-open > a{color: #1693eb;}.st-accordion ul li.st-open > a span{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);transform:rotate(180deg);right:10px;opacity:1;}
Let’s style theand its :
让我们对内容及其元素进行样式设置：
.st-content{padding: 5px 0px 30px 0px;}.st-content p{font-size:16px;font-family:Georgia, serif;font-style: italic;line-height:28px;padding: 0px 4px 15px 4px; }.st-content img{width:125px;border-right:1px solid #fff;border-bottom:1px solid #fff;}
With a media query we will make sure that the font size of the item title will be :
通过媒体查询，我们将确保项目标题的字体大小较小：
@media screen and (max-width: 320px){.st-accordion ul li > a{font-size:36px;}}
And that’s all the style! Let’s move on to the .
这就是所有样式！让我们继续。
(The )

文章插图
Let’s look at the mostparts of this . We’ll start by the:
让我们看一下该插件最重要的部分。我们将从默认选项开始：

$.Accordion.defaults= {// index of opened item. -1 means all are closed by default.open: -1,// if set to true, only one item can be opened. // Once one item is opened, any other that is // opened will be closed firstoneOpenedItem	: false,// speed of the open / close item animationspeed: 600,// easing of the open / close item animationeasing: 'easeInOutExpo',// speed of the scroll to action animationscrollSpeed: 900,// easing of the scroll to action animationscrollEasing	: 'easeInOutExpo'};

Weourbythe init :
我们通过调用init函数来初始化插件：

_init: function( options ) {this.options= $.extend( true, {}, $.Accordion.defaults, options );// validate optionsthis._validate();// current is the index of the opened itemthis.current= this.options.open;// hide the contents so we can fade it in afterwardsthis.$items.find('div.st-content').hide();// save original height and top of each item	this._saveDimValues();// if we want a default opened item...if( this.current != -1 )this._toggleItem( this.$items.eq( this.current ) );// initialize the eventsthis._initEvents();},

Thesaves theand top of an item so that we know where we have towhen we open an item.
函数保存项目的原始高度和顶部，以便我们知道打开项目时必须在哪里滚动。
If we’ve set an item to beby , we will call . Then wethe .