创建一个平面风格手风琴使用CSS3和jQuery

来源：http://www.hengtaiboyuan.com 作者：恒泰博远时间：2014-07-21

[摘要]手风琴菜单的已使用的网站导航很长一段时间。手风琴是物品，如标签，说明和缩略图的垂直或水平方向叠置列表。每个项目可以“扩大”或“延伸”透露与该项目相关的内容。

手风琴菜单的已使用的网站导航很长一段时间。手风琴是物品，如标签，说明和缩略图的垂直或水平方向叠置列表。每个项目可以“扩大”或“延伸”透露与该项目相关的内容。

在手风琴使用纯CSS3的一些最新的CSS3选择器中不支持的最古老的浏览器将无法在所有的浏览器。使用jQuery是最好的一段路要走。

在本教程中，我们将告诉你如何建立一个扁平式手风琴，就会发现每个项目的说明。

让我们开始吧：

你需要完成本教程的资源：

jQuery库

字体真棒

在CSS3和jQuery的基本知识

时间和耐心

我们所要建设

入门：

潜水在我们的标记之前，首先我们需要添加一些代码到我们的头上部分。这些措施包括样式表，jQuery库，字体真棒链接和其他一些代码，以使我们的代码工作在一个较旧的浏览器。

标记：

该标记将HTML5的DT（其中包含一个描述列表的标题/名称）和dd（包含DT标签的说明），然后我们会在DL标签包裹的一切。里面的dt的标签，我们还将添加的字体真棒标签。你可以访问这个页面，了解如何让您的首选图标的更多信息。

CSS样式

对于我们的CSS，首先让我们定义的车身尺寸，然后将添加一些关于它的详细信息，如颜色，字体大小和字体面。

接下来，让我们添加一些样式到我们的DD和DT标签。我们将一个浅绿色的颜色加入到我们的日标签使其明显，它是列表的标题或名称。然后我们dt的标签，我们只是把一个普通的颜色白色的背景吧：

那么，让我们针对dt的第一个孩子和第二个到最后一个孩子，删除边框的顶部和底部边框。

最后，我们将添加类隐藏。我们会处理这个类以后我们的jQuery代码隐藏和显示我们的日标签。

jQuery的评论：

只是有点检讨如果你是新来的jQuery。为了让我们的jQuery代码的工作，你需要从某个地方包括主jQuery脚本。有很多方法可以做到这一点，但在本教程中，我们将把它标记的结束之前。

jQuery

我们现在准备潜入jQuery的。我们将添加一个匿名函数，并针对dt的标签上单击事件显示和隐藏它。请注意，该持续时间是300 slideDown和效果基本show方法，这意味着它将在3毫秒的速度滑动。复制并粘贴在jQuery库链接下面的代码只是在结束之前.

本文链接：http://www.hengtaiboyuan.com/jsdt/content_293 转载请注明来自北京恒泰博远科技有限公司