			JavaScript插件
			下列需要JavaScript配合才能显示效果。需要引入 jQuery库和 jingyes.js。一些效果是写在 css 文件里面，js 只是负责交互控制部分。另外一些是通过 js 操作 style 属性完成的。

toggle class

切换 DOM 元素的 class. 可以通过 data-jy="partten.class". 前面的 partten 是 css 选择器, 最后的 .class 是要切换的 class.

<button class="primary toggle" data-jy="body.flat">整个 body 圆角切换</button>
<button class="primary toggle" data-jy=".docs-example.flat">example 下的圆角切换</button>

注意上面相互的影响.

手风琴

给导航加一个class accordion 就变成了手风琴效果，标记是 nav dl.accordion ，当然还要有 dd dl嵌套。左侧的子导航已经加上了这个效果，点击子导航中的“手风琴”就可以看到效果。

<nav>
  <dl class="accordion">
    <dt><a href="#accordion">手风琴</a></dt>
    <dd>
      <dl>
        <dt>演示条目</dt>
        <dt>演示条目</dt>
      </dl>
    </dd>
  </dl>
</nav>

展开、折叠效果写在 jingyes.css 中。如果您觉得使用 nav 有所不妥，可以用 div.nav dl 这种形式替代 nav dl。后续类似情况同理

图片轮播

图片轮播有固定的结构, 并使用 class="carousel". 需要给 .carousel 的父元素设定固定的宽度或高度, 并设置 overflow: hidden;. 如果没有设置 overflow: hidden, 将自动按照横向轮播进行设置.

简单的轮播

第二播

第三播

<div class="carousel">
	<div>
		<img src="go1480x270.png">
		<div><p>简单的轮播</p></div>
	</div>
	<div>
		<a href="#">
			<img src="go2480x270.png">
		</a>
		<div><p>第二播</p></div>
	</div>
	<div>
		<a href="#">
			<img src="go3480x270.png">
		</a>
		<div><p>第三播</p></div>
	</div>
</div>

在这个例子中就使用了 div.nav dl 的结构替代nav。

也许你注意到了这个轮播在最后一个图片过度到第一图片的时候，拉动的方向是不同的。静夜思认为不必在意这些微小的不同。这效果也很不错，不是么！