6.3.4 手风琴导航

在垂直导航中，如果存在多个分级，常常使用手风琴导航，它会以手风琴方式展开和折叠，来节约空间。

简单的说，手风琴导航就是垂直导航的层层嵌套，需要多少级，就嵌套多少层。这里就以两级导航为例，来介绍手风琴导航的基本制作方法。

为了方便控制手风琴导航的样式和行为，外层导航使用定义列表 dl、而内层使用无序列表 ul 来包裹导航中的链接元素：

<dl class="accordion">
    <dt><a href="#">公司介绍</a></dt>
    <dd>
        <ul class="verticalnav">
        <li><a href="#">公司概况</a></li>
        <li><a href="#">历史沿革</a></li>
        </ul>
    </dd>
    <dt><a href="#">产品中心</a></dt>
    <dt><a href="#">工程案例</a></dt>
    <dt><a href="#">新闻动态</a></dt>
    <dd>
        <ul class="verticalnav">
        <li><a href="#">公司新闻</a></li>
        <li><a class="current" href="#">行业新闻</a></li>
        </ul>
    </dd>
    <dt><a href="#">联系我们</a></dt>
</dl>

首先，通过外层列表的宽度，来控制整个导航所占用的水平空间。并通过垂直外边距和背景颜色，让外层链接各元素之间界限分明。

.accordion {
    width: 120px;
}
.accordion dt {
    margin: 1px;
    background: #6FB934;
}

其次，设置链接的样式。

.accordion a {
    display: block;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
}

这里使用子选择器 .accordion a 设置链接的样式，对整个手风琴菜单中的链接都产生影响，而二级导航中的链接需要局部调整。

.verticalnav li a {
    color: #666;
    font-size: 12px;
}

最后，设置二级导航中链接的悬停状态、激活状态，及当前链接的样式。

.verticalnav li a:hover, 
.verticalnav li a:focus {
    color: #ff5f3e;
}
.verticalnav li a.current {
    color: #ff5f3e;
}

到此为止，手风琴导航的就制作完成了，但整个导航都处于展开状态，还需要实现手风琴方式的展开和折叠效果。

这个可以通过 jQuery来实现，其基本思想是：第一个导航的子导航默认展开，其他全部隐藏。当单击某个 dt 下的链接时，所有已经显示的 dd 元素以动画方式隐藏，当前链接元素的父元素（即 dt）的相邻元素（即二级导航 dd 元素）以动画方式展开。代码如下：

$(document).ready(function(){
    $("dd:not(:first)").hide();
    $("dt a").click(function(){
        $("dd:visible").slideUp("slow");
        $(this).parent().next().slideDown("slow");
        return false;
    });
});

现在，当单击导航上的某个链接时，整个导航就能够以手风琴方式的展开和折叠了。运行结果如图 6‑14 所示：