CSS Word的文档结构视图设计

“文档结构视图”功能，可以通过jQuery的动画来模拟。该功能与Word保持一致，默认情况下，目录可见。当用户点击“文档结构视图”后，隐藏目录，再次点击后，显示目录。

首先，在文章的页眉上，增加“文档结构视图”复选框，供用户点击。复选框被包含在一个label中，并为label增加id属性，以便jQuery能够根据id来捕获用户点击事件。同理，也要为复选框增加id属性，以便用户点击后，jQuery能够进行选中和取消选中。HTML代码如下：

1. <label id="view"><input id="show" type="checkbox" checked />文档结构视图</label>

复选框默认是选中状态，当用户点击之后，取消选中状态，并隐藏目录，再次点击后，又变为选中状态，并显示目录。jQuery代码如下：

1. <script>
2. $(function() {
3.    $("#view").toggle(function(){
4.        $("nav").hide();
5.        $("[id=show]:checkbox").attr("checked", false);
6.    },function(){
7.        $("nav").show();
8.        $("[id=show]:checkbox").attr("checked", true);
9.    });
10. });
11. </script>

在隐藏和显示目录时，可以直接隐藏和显示，也可以通过淡入淡出效果。为了与 word保持一致，这里采用直接隐藏和显示的方式。

而读者可以选择淡入淡出效果，这完全取决于个人的喜好。采用淡入淡出效果时，只需用 fadeOut() 替换 hide()，用 fadeIn() 替换 show() 即可。并且，可以为 fadeOut() 和 fadeIn() 提供一个时间值，来控制淡入淡出的缓慢程度。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。