荣耀滑盖手机滑盖容易坏吗_灵活的滑盖式手风琴

荣耀滑盖手机滑盖容易坏吗

View demo 查看演示 Download Source 下载源

In today’s tutorial we’ll be creating a simple responsive accordion that, when opened, will slide to the top of the viewport and reveal the content by fading it in. The idea is to avoid that the user has to scroll the content area into place. We’ll also add some nice CSS3 transitions for the arrow to appear and to rotate when we click on an item. The accordion will be flexible, meaning that it will have a liquid width adjusting to the screen size.

在今天的教程中，我们将创建一个简单的响应式手风琴，将其打开时将滑动到视口的顶部，并通过淡入显示内容。该想法是避免用户必须将内容区域滚动到适当位置。 我们还将添加一些不错CSS3过渡，以便当我们单击某个项目时箭头可以显示并旋转。 手风琴将很灵活，这意味着它的液体宽度可根据屏幕尺寸进行调整。

The beautiful fashion photography is by Rayand; check out his Flickr Photostream.

精美的时装摄影是雷安德拍摄的； 查看他的Flickr Photostream 。

标记 (The Markup)

The HTML structure will consist of a wrapper with the class and ID st-accordion and an unordered list. The list items will have a link element which will serve as the item title and a content area that is initially hidden. The span with the class st-arrow will be the little indicator on the right side that we will make appear when we hover over its parent, the link element.

HTML结构将由具有类和ID st-accordion的包装器和无序列表组成。 列表项将具有一个链接元素(用作项目标题)和一个最初被隐藏的内容区域。 当将鼠标悬停在其父级link元素上时，带有st-arrow类的范围将是右侧的小指示器。

<div id="st-accordion" class="st-accordion">
	<ul>
		<li>
			<a href="#">
				Item Title
				<span class="st-arrow">Open or Close</span>
			</a>
			<div class="st-content">
				<p>Some content</p>
			</div>
		</li>
		<li> ... </li>
	</ul>
</div>

Let’s take a look at the style.

让我们看一下样式。

CSS (The CSS)

First, we will style the main wrapper. We will give it a width of 100 because we want it to adjust to the width of its surrounding wrapper. If you don’t have one, just use a suitable percentage here (if you want it to be liquid). The surrounding wrapper in the demo has a maximal width of 800 pixels and a width of 90%. The st-accordion will have a minimal width of 270 pixels:

首先，我们将样式化主包装器。 我们将其宽度设置为100，因为我们希望它可以调整为其周围包装纸的宽度。 如果没有，请在此处使用适当的百分比(如果您希望它是流动的)。 演示中的周围包装器的最大宽度为800像素，宽度为90％。 st手风琴的最小宽度为270像素：

.st-accordion{
    width:100%;
    min-width:270px;
    margin: 0 auto;
}

Assuming that we have some kind of reset css that will remove paddings and margins from unordered lists etc., we define the style for each list element. We’ll set an initial height of 100 pixels which is basically the height of the link element and the overflow will be hidden, so we won’t see the content. When we open the item, we’ll animate its height in order to reveal the content. The borders that we are giving to the element will create a nice engraved separation between the items.

假设我们有某种重置CSS，它将删除无序列表等中的填充和边距，我们为每个列表元素定义样式。 我们将设置100像素的初始高度，该高度基本上是link元素的高度，溢出将被隐藏，因此我们看不到内容。 打开项目时，我们将对其高度进行动画处理以显示内容。 我们为元素提供的边框将在各个项目之间创建一个精美的雕刻分隔。

.st-accordion ul li{
    height: 100px;
    border-bottom: 1px solid #c7deef;
    border-top:1px solid #fff;
    overflow: hidden;
}

The first item should not have a top border:

第一项不应有顶部边框：

.st-accordion ul li:first-child{
    border-top:none;
}

We’ll add a color transition to the link element which will create a nice effect on hover. The line-height should be the same like the initial height of the list element:

我们将向link元素添加颜色过渡，这将对悬停产生很好的效果。 line-height应该与list元素的初始高度相同：

.st-accordion ul li > a{
    font-family: 'Josefin Slab',Georgia, serif;
    text-shadow: 1px 1px 1px #fff;
    font-size: 46px;
    display: block;
	position: relative;
    line-height: 100px;
	outline:none;
    -webkit-transition:  color 0.2s ease-in-out;
	-moz-transition:  color 0.2s ease-in-out;
	-o-transition:  color 0.2s ease-in-out;
	-ms-transition:  color 0.2s ease-in-out;
	transition:  color 0.2s ease-in-out;
}
.st-accordion ul li > a:hover{
    color: #1693eb;
}

The span for the arrow will be positioned absolutely and we’ll hide it by setting it outside of the link element and giving it an opacity of 0. The transition will be the item moving from the right and fading in:

箭头的跨度将绝对定位，我们将其设置为在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 link element will stay with the hover color. The span will be rotated to that the arrow stays pointing up 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 the content and its elements:

让我们对内容及其元素进行样式设置：

.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 smaller:

通过媒体查询，我们将确保项目标题的字体大小较小：

@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 JavaScript.

这就是所有样式！ 让我们继续JavaScript。

JavaScript (The JavaScript)

Let’s look at the most important parts of this plugin. We’ll start by the default options:

让我们看一下该插件最重要的部分。 我们将从默认选项开始：

$.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 first
	oneOpenedItem	: false,
	// speed of the open / close item animation
	speed			: 600,
	// easing of the open / close item animation
	easing			: 'easeInOutExpo',
	// speed of the scroll to action animation
	scrollSpeed		: 900,
	// easing of the scroll to action animation
	scrollEasing	: 'easeInOutExpo'
};

We initialize our plugin by calling the init function:

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

_init 				: function( options ) {
		
		this.options 		= $.extend( true, {}, $.Accordion.defaults, options );
		
		// validate options
		this._validate();
		
		// current is the index of the opened item
		this.current		= this.options.open;
		
		// hide the contents so we can fade it in afterwards
		this.$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 events
		this._initEvents();
		
	},

The _saveDimValues function saves the original height and top of an item so that we know where we have to scroll when we open an item.

_saveDimValues函数保存项目的原始高度和顶部，以便我们知道打开项目时必须在哪里滚动。

If we’ve set an item to be opened by default, we will call _toggleItem. Then we initialize the events.

如果我们将项目设置为默认打开，我们将调用_toggleItem 。 然后我们初始化事件。

The _toggleItem function takes care of the two cases when clicking an item. Either we have the item already open, i.e. it has the class st-open, or it is closed. If it’s open, we’ll set the current to -1 and fade out the content while setting the item’s height to its original one. If the item we are clicking is closed, we’ll set the index of that item to be the current one, animate the height to fit the content and fade in the content. Then we scroll the window to the point that the clicked item stays at the top by calling the _scroll function:

_toggleItem函数在单击一个项目时会处理两种情况。 我们要么该项目已经打开，即它具有类st-open ，要么它已关闭。 如果它是打开的，我们将当前设置为-1并淡出内容，同时将项目的高度设置为其原始高度。 如果我们单击的项目是关闭的，则将该项目的索引设置为当前索引，设置动画高度以适合内容并淡入内容。 然后，通过调用_scroll函数，将窗口滚动到单击的项目停留在顶部的位置：

_toggleItem			: function( $item ) {
	
	var $content = $item.find('div.st-content');
	
	( $item.hasClass( 'st-open' ) ) 
			
		? ( this.current = -1, $content.stop(true, true).fadeOut( this.options.speed ), $item.removeClass( 'st-open' ).stop().animate({
			height	: $item.data( 'originalHeight' )
		}, this.options.speed, this.options.easing ) )
		
		: ( this.current = $item.index(), $content.stop(true, true).fadeIn( this.options.speed ), $item.addClass( 'st-open' ).stop().animate({
			height	: $item.data( 'originalHeight' ) + $content.outerHeight( true )
		}, this.options.speed, this.options.easing ), this._scroll( this ) )

},

In the _initEvents function we initialize two events, clicking on an item and the window resize. When we click on an item we either open or close it calling the _toggleItem function and if we’ve set the option oneOpenedItem to true, we first close any opened item before opening the current one.

在_initEvents函数中，我们初始化两个事件，单击一个项目，然后调整窗口大小。 当我们单击某个项目时，我们将调用_toggleItem函数将其打开或关闭，并且如果将选项oneOpenedItem设置为true，则在打开当前项目之前，我们首先将其关闭。

When the window gets resized we need to reset the original item values and the content’s height. We’ll also want to scroll the item to the top again.

调整窗口大小后，我们需要重置原始项目值和内容的高度。 我们还希望再次将项目滚动到顶部。

_initEvents			: function() {
	
	var instance	= this;
	
	// open / close item
	this.$items.find('a:first').bind('click.accordion', function( event ) {
		
		var $item			= $(this).parent();
		
		// close any opened item if oneOpenedItem is true
		if( instance.options.oneOpenedItem && instance._isOpened() && instance.current!== $item.index() ) {
			
			instance._toggleItem( instance.$items.eq( instance.current ) );
		
		}
		
		// open / close item
		instance._toggleItem( $item );
		
		return false;
	
	});
	
	$(window).bind('smartresize.accordion', function( event ) {
		
		// reset original item values
		instance._saveDimValues();
	
		// reset the content's height of any item that is currently opened
		instance.$el.find('li.st-open').each( function() {
			
			var $this	= $(this);
			$this.css( 'height', $this.data( 'originalHeight' ) + $this.find('div.st-content').outerHeight( true ) );
		
		});
		
		// scroll to current
		if( instance._isOpened() )
		instance._scroll();
		
	});
	
},

These were the most important functions for this accordion. I hope you like this simple accordion and find it useful!

这些是此手风琴最重要的功能。 希望您喜欢这个简单的手风琴并发现它有用！

翻译自: https://tympanus.net/codrops/2011/10/12/flexible-slide-to-top-accordion/

荣耀滑盖手机滑盖容易坏吗