使用jQuery改进导航：菜单、标签及折叠选项

一、让页面上所有的链接都在新窗口打开。

        除此可以设置页面上所有连接的属性，让它们在新窗口打开之外，还可以对页面上的这些链接做别的事情。

        1、给所有的链接添加一个新的类；

        2、为所有链接添加内容与链接文本一致的title属性；

        3、为所有链接分别添加一个rel属性；

        4、删除所有链接的href属性，从而禁用这些链接。

        下面是用jQuery让页面上的链接在新窗口打开的方法，代码如下：

选取#links li元素的后代元素a，然后使用attr()方法把这些链接元素的target属性设置为_blank。

$('#links li a').attr('target', '_blank');

二、突出显示导航中的当前选中项。

        方法是用jQuery脚本对菜单项URL与页面实际URL进行对比，让正确的菜单项高亮。

        1、创建一个变量path，并为它赋值为location.pathname，pathname是javascript原生对象location的一个属性，它返回URL中域名之后的部分。

        var path = location.pathname;    （假如我们正在访问页面www.qq.com/mycode/demo.html。那么location.pathname就等于/mycode/demo.html。

        2、再创建一个变量pathArray，然后使用原生的java Script字符串方法.split()把pathname从/处拆分，得到一个数组。

        var pathArray = path.split( '/' );      （拆分结果，即pathname的值是['mycode' , 'demo.html']。

        3、创建最后一个变量pArrLength，把它的值设置为pathArray的长度。

        var pArrLength = pathArray.length;

        4、创建一个for循环，迭代处理数组pathArray的每一个值。然后使用属性选择器选中包含其中某个值的所有链接，为其加上selected类。这里的属性选择器使用了通配符（*），他会匹配href的任意部分。

        for(i = 0 ; i < pArrLength;i++){

                $(" a[ href*=' "+pathArray[i] + " ' ]").addClass("selected");

        }

 三、创建简单的下拉菜单。

1、创建html文件。

<div id="header">
 <ul id="navigation">
  <li><a href="#">Home</a></li>
  <li><a href="#">Our Work</a>
   <ul class="subnav">
    <li><a href="#">Example 1</a></li>
    <li><a href="#">Example 2</a></li>
    <li><a href="#">Example 3</a></li>
   </ul>
  <li><a href="#">Services</a>
   <ul class="subnav">
    <li><a href="#">Service 1</a></li>
    <li><a href="#">Service 2</a></li>
    <li><a href="#">Service 3</a></li>
   </ul>
  </li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Contact</a></li>
 </ul>
</div>

2、准备样式表

使用YUI（Yahoo! User Interface)清理样式

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3.h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}

h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}

3、设置CSS控制页面上主菜单和下拉菜单的布局。

.container{width:950px;margin:10px auto;font:14px "Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;border:1px solid #333;}
p{margin:10px;}
ul#navigation{list-style-type:none;background:#CE0100;height:63px;font-size:24px;}
ul#navigation li{float:left;width:175px;text-align:center;position:relative;height:63px;padding:20px 5px 10px 5px;}
ul#navigation li a{color:#fff;text-decoration:none;display:block;}
ul#navigation li a.active{border:1px solid blue;}     //在jQuery里面添加了类active，在CSS里面设置样式
ul#navigation li ul.subnav{background:#E7F1D2;width:175px;clear:both;display:none;position:absolute;top:63px;-moz-border-radius-bottomleft:8px;-moz-border-radius-bottom:8px;-webkit-border-bottom-left-radius:8px;-webkit-border-bottom-right-radius:8px;border-radius:8px;border-left:2px solid #998;border-right:2px solid #998;border-bottom:2px solid #998;}
ul#navigation li ul.subnav li{clear:both;height:40px;padding:0;text-decoration:center;margin:0px;}
ul#navigation li ul.subnav li a{background:none;font-size:18px;color:#333;text-decoration:none;padding:10px 0;border:none;}

ul#navigation li ul.subnav li a:hover{background:#DBF1AD;font-size:18px;color:#333;border:none;}

4、使用选择器#navigation li选中菜单项，设置它的hover事件。hover事件是mouseenter和mouseleave事件的组合。第一个事件处理函数处理mouseenter事件，我们需要用.find()找到类名为subnav的嵌套列表，然后调用.slideDown()方法把它显示出来。第二个事件处理函数处理mouseleave事件，它做得事情和mouseenter事件刚好相反，即用.find()找出相应的子菜单，然后调用.slideUp()方法把它收起来。对那些没有子菜单的元素来说，当鼠标悬停在他们之上时，由于找不到.subnav子元素，什么都不会发生。

$(document).ready(function(){
$('#navigation li').hover(function(){
$(this).find('.subnav').slideDown('slow');
},function(){
$(this).find('.subnav').slideUp('fast');
});
});

PS:上面的语句用限定条件（this）。先选中#navigation li元素，然后绑定hover事件，我们就可以用this关键字引用被hover的元素，从而确保.slideDown()方法只应用到被悬停列表项的子菜单上。

5、最后一步，当鼠标位于主菜单或相应的子菜单上时，主菜单和相应的子菜单应该保持高亮。具体是：使用.find()方法找到相应的a元素，如果是mouseenter事件就添加active类，否则就删除active类。

$(document).ready(function(){
$('#navigation li').hover(function(){
$(this).find('.subnav').slideDown('slow');
$(this).find('a').addClass('active');
},function(){
$(this).fint('.subnav').slideUp('fast');
$(this).find('a').removeClass('active');
});
});

6、还可以使用.animate()方法为下拉菜单增加特效。CSS属性、动画持续时间、缓动方式及回调函数。

$(document).ready(function(){
$('#navigation li').hover(function(){
$(this).find('.subnav').animate({opacity:1.0,height:'toggle'},500);
$(this).find('a').addClass('active');
},function(){
$(this).fint('.subnav').animate({opacity:0,height:'toggle'},500);
$(this).find('a').removeClass('active');
});
});

四、创建折叠菜单

折叠菜单只显示一节的内容，同时隐藏其他内容。

1、首先定义折叠菜单的HTML结构。两个元素：一个是折叠菜单标题元素，一个是折叠菜单的内容元素。

<div id="accordion">
<div class="accordion-header">
<h3>Books</h3>
<span></span>
</div>
<ul class="accordion-content">
<li><a href="#">Business</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">Tech</a></li>
<li><a href="#">Romance</a></li>
</ul>
<div class="accordion-header">
<h3>Electronics</h3>
<span></span>
</div>
<ul class="accordion-content">
<li><a href="#">Audio</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Automobile</a></li>
<li><a href="#">Appliance</a></li>
</ul>
<div class="accordion-header">
<h3>Sporting Goods</h3>
<span></span>
</div>
<ul class="accordion-content">
<li><a href="#">Baseball</a></li>
<li><a href="#">Basketball</a></li>
<li><a href="#">Football</a></li>
<li><a href="#">Tennis</a></li>
</ul>
</div>

2、使用CSS reset，建议使用YUI，上一个节点有相关代码。

3、使用CSS定义菜单和内容元素的样式。菜单图标使用了CSS“精灵”（sprite）。

“精灵”是指创建一张大图，然后通过背景定位技术用这一张图为Web站点上的多个元素提供背景。使用“精灵”的好处就是可以大大减少站点向Web服务器请求图片的次数，从而降低了载入时间，提高了站点性能。如果你的站点中使用了20多张图片，就能明显体会到“精灵”时的性能改善。此外，“精灵”还有助于防止图片载入过程中的闪烁。（比如使用两张图片制作翻转效果，并且被悬停的图片尚未加载完时）。

#accordion{width:225px;margin:10px 0px 10px 10px;}
#accordion .accordion-header{background:#3971AC;color:#fff;border-bottom:1px solid #fff;position:relative;}
#accordion .accordion-header h3{margin:0;cursor:pointer;text-indent:10px;padding:5px 0;}
#accordion .header-active{background:#48ABC3;}
#accordion .accordion-header span{background:url(../images/accordion_spriter.gif) no-repeat;display:block;position:absolute;width:11px;height;12px;top:5px;left:200px;}
#accordion .accordion-header span.icon-active{background:url(../images/accordion_sprite.gif) no-repeat;background-position:0 -12px;display:block;position:absolute;width:11px;height:12px;top:5px;left:200px;}
#accordion ul.accordion-content{margin:0px 0 0px 0;padding:5px 5px 10px 5px;list-style-type:none;background:#A8D7E2;}
#accordion ul.accordion-content li{padding:1px 0px;display:block;margin:0;padding:2px 5px;}
#accordion ul.accordion-content li a{color:#D16C3A;}
4、在页面加载完成之后，确保只有第一个菜单元素及其内容元素可见。以下jQuery代码结合使用.not()方法和:first过滤器，使第一个元素之外的其他折叠内容（内容元素）隐藏。

$('.accordion-content').not(':first').hide();

.not()方法过滤掉参数选择器匹配的任意元素或者选择器。参数选择器可以是某种过滤器（如本例所示），也可以是一个具体的元素（在下面这一步我们就会看到这种例子）。

5、隐藏完除第一个外的所有.accordion-content元素之后，我们用另一条语句找出第一个.accordion.content元素，并调用.show()方法（确保它可见）：

$('.accordion-content:first').show();

6、为了让当前菜单项高亮，我在CSS文件中定义了一个header_active类。使用下面的代码把这个类应用到第一个.accordion-header元素：

$('.accordion-header:first').addClass('header-active');

我还使用空的span标签为折叠菜单的标题加了图标。我定义了一个icon-active类，它会显示成一个向下的箭头，提示用户这个内容区是展开状态。如果标题没有这个类，span标签就会显示成一个向右的箭头。使用:first过滤器选中第一个.accordion-header元素，然后链式调用.find()方法找出它的span后代元素，为它加上.icon-active类。

$('.accordion-header:first').find('span').addClass('icon-active');

7、现在进入有趣的部分——让折叠菜单响应用户输入，也就是为.accordion-header标题元素绑定click事件处理函数。

$('.accordion-header').click(function(){

});

8、click事件处理函数中的第一条语句负责让当前展开的元素缩回去，并移除使它们高亮的类。为此，只需选中可见的.accordion-content元素，并调用.slideUp()。之后再调用.prev()得到DOM树的上一个元素，也就是对应的.accordion-header元素，删掉该元素的header-active类。

$('.accordion-header').click(function(){

$('.accordion-content:visible').slideUp('slow').prev()

.removeClass('header-active');

});

.prev()方法用于查找DOM树中的上一个兄弟元素。.prev()方法还支持选择器参数，比如你可以将.active作为参数传递给它。

9、增加一条语句，确保把所有可见的.icon-active元素显示成向右的箭头，方法是移除icon-active类。

$('.accordion-header').click(function(){
$('.accordion-content:visible').slideUp('slow').prev()
.removeClass('header-active');
$('.icon-active:visible').removeClass('icon-active');   //类的名字icon-active前面不需要句点。
});

请务必记住，.addClass()、.removeClass()和hasClass()方法的参数，类的名字前不需要句点。这是一个常被忽视的问题，会导致jQuery脚本错误。另外，.is()、.filter()方法和.not()方法在参数为类名时，一定要加上句点。

10、增加一条语句，使用this关键字选中被单击的菜单标题，给它加上header-active类。然后用.next()方法选中它的下一个元素，即内容元素，调用slideDown()让其慢慢滑下。

$('.accordion-header').click(function(){
$('.accordion-content:visible').slideUp('slow').prev()
.removeClass('header-active');
$('.icon-active:visible').removeClass('icon-active');
$(this).addClass('header-active').next().slideDown('slow');
});

.next()方法与.prev()方法正相反，它不返回上一个兄弟元素，而是返回下一个。

11、最后一条语句使用this关键字，结合.find()方法找到.accordion-header元素中的span标签，给它加上.icon-active类。

$('.accordion-header').click(function(){
$('.accordion-content:visible').slideUp('slow').prev()
.removeClass('header-active');
$('.icon-active:visible').removeClass('icon-active');
$(this).addClass('header-active').next().slideDown('slow');
$(this).find('span').addClass('icon-active');
});

如果在站点或应用中，折叠菜单项不是页面固有的，而是被动态添加到DOM中的，你一定要改用.live()方法绑定click事件。否则那些在DOM加载完之后才添加进来的元素不会响应click事件。

最后，将所有的HTML、CSS和jQuery代码组合到一起，并在浏览器中载入这个页面，你就会看到一个生龙活虎的折叠菜单。

总结不足：

1、随着不断向折叠菜单中添加菜单项，我们开始需要滚动页面才能选择或查看其中嵌入的内容。

2、刷新页面时，折叠菜单并不会记住上一次展开的是哪个菜单项，不过我们可以通过jQuery和cookie实现这类功能。解决这个问题还有一个更好的、不使用cookie的技术，那就是在URL的查询字符串中使用锚，详见Rebecca Murphey的一篇博文(http://blog.rebeccamur-phey.com/2007/12/04/anchor-based-url-navigation-with-jQuery/)。

3、折叠菜单的当前位置无法保存到书签中。如果你通过添加书签收藏一个页面，期望下次打开它时能打开保存时看到的小节，你的期望会落空。这个问题可以通过上一段中提到的锚技术解决。

4、如果你的站点受众缺乏因特网经验，他们有可能不熟悉折叠菜单，因此很可能根本就不会用。