jQuery 抄袭笔记(25) :导航1
25 Oct 2011摘自w3school
:visible 选择器选取每个当前是可见的元素。
除以下几种情况之外的元素即是可见元素： 设置为 display:none type="hidden" 的表单元素 Width 和 height 设置为 0 隐藏的父元素（同时隐藏所有子元素）
01 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
02 “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
03 <html xmlns=“http://www.w3.org/1999/xhtml”>
04 </span>
05 <meta http-equiv=“Content-Type” content=“text/html; charset=gb2312″ />
06</span>Hello Lazynight~~<span style="color: #ff4400; font-weight: bold;"></title></span><br /> <span style="color: #696969;">07</span> <span style="color: #ff4400; font-weight: bold;"><script </span><span style="color: #ffff00;">type=</span><span style="color: #d13800;">“text/javascript”</span> <span style="color: #ffff00;">src=</span><span style="color: #d13800;">“jquery-1.1.3.pack.js”</span><span style="color: #ff4400; font-weight: bold;">></script></span><br /> <span style="color: #696969;">08</span> <span style="color: #ff4400; font-weight: bold;"><script </span><span style="color: #ffff00;">type=</span><span style="color: #d13800;">“text/javascript”</span><span style="color: #ff4400; font-weight: bold;">></span><br /> <span style="color: #696969;">09</span> <span style="color: #c0c0c0;">$</span>(<span style="color: #c0c0c0;">document</span><span style="color: #c0c0c0;">).</span><span style="color: #c0c0c0;">ready</span>(<span style="color: #ff4400; font-weight: bold;">function</span><span style="color: #c0c0c0;">(){</span><br /> <span style="color: #f810b0;">10</span> <span style="color: #c0c0c0;">$</span>(<span style="color: #d13800;">“dd:not(:last)”</span><span style="color: #c0c0c0;">).</span><span style="color: #c0c0c0;">hide</span>();<br /> <span style="color: #696969;">11</span> <span style="color: #696969;">//初始化：隐藏 dd 不是最后一个的</span><br /> <span style="color: #696969;">12</span> <span style="color: #696969;">//$(“dd:not(:first)”).hide(); 你也可以试试这个哦~！</span><br /> <span style="color: #696969;">13</span> <span style="color: #c0c0c0;">$</span>(<span style="color: #d13800;">“dt a”</span><span style="color: #c0c0c0;">).</span><span style="color: #c0c0c0;">click</span>(<span style="color: #ff4400; font-weight: bold;">function</span><span style="color: #c0c0c0;">(){</span><br /> <span style="color: #696969;">14</span> <span style="color: #c0c0c0;">$</span>(<span style="color: #d13800;">“dd:visible”</span><span style="color: #c0c0c0;">).</span><span style="color: #c0c0c0;">slideUp</span>(<span style="color: #d13800;">“fast”</span>);<br /> <span style="color: #f810b0;">15</span> <span style="color: #c0c0c0;">$</span>(<span style="color: #ff4400; font-weight: bold;">this</span><span style="color: #c0c0c0;">).</span><span style="color: #c0c0c0;">parent</span><span style="color: #c0c0c0;">().</span><span style="color: #c0c0c0;">next</span><span style="color: #c0c0c0;">().</span><span style="color: #c0c0c0;">slideDown</span>(<span style="color: #d13800;">“fast”</span>);<br /> <span style="color: #696969;">16</span> <span style="color: #ff4400; font-weight: bold;">return</span> <span style="color: #ff4400; font-weight: bold;">false</span>;<br /> <span style="color: #696969;">17</span> <span style="color: #c0c0c0;">});</span><br /> <span style="color: #696969;">18</span> <span style="color: #c0c0c0;">});</span><br /> <span style="color: #696969;">19</span> <span style="color: #ff4400; font-weight: bold;"></script></span><br /> <span style="color: #f810b0;">20</span> <span style="color: #ff4400; font-weight: bold;"><style></span><br /> <span style="color: #696969;">21</span> <span style="color: #ff4400; font-weight: bold;">dl</span> <span style="color: #c0c0c0;">{</span><span style="color: #ff4400; font-weight: bold;">width</span><span style="color: #c0c0c0;">:</span><span style="color: #c0c0c0;">150px</span><span style="color: #c0c0c0;">;}</span><br /> <span style="color: #696969;">22</span> <span style="color: #ff4400; font-weight: bold;">dl</span><span style="color: #c0c0c0;">,</span><span style="color: #ff4400; font-weight: bold;">dd</span> <span style="color: #c0c0c0;">{</span><span style="color: #ff4400; font-weight: bold;">margin</span><span style="color: #c0c0c0;">:</span><span style="color: #c0c0c0;"></span><span style="color: #c0c0c0;">;}</span><br /> <span style="color: #696969;">23</span> <span style="color: #ff4400; font-weight: bold;">dt</span> <span style="color: #c0c0c0;">{</span><span style="color: #ff4400; font-weight: bold;">background-color</span><span style="color: #c0c0c0;">:</span><span style="color: #c0c0c0;">#000</span>;<span style="color: #ff4400; font-weight: bold;">font-size</span><span style="color: #c0c0c0;">:</span><span style="color: #c0c0c0;">16px</span>;<span style="color: #ff4400; font-weight: bold;">padding</span><span style="color: #c0c0c0;">:</span><span style="color: #c0c0c0;">2px</span>;<span style="color: #ff4400; font-weight: bold;">margin</span><span style="color: #c0c0c0;">:</span><span style="color: #c0c0c0;">2px</span><span style="color: #c0c0c0;">;}</span><br /> <span style="color: #696969;">24</span> <span style="color: #ff4400; font-weight: bold;">dt</span> <span style="color: #ff4400; font-weight: bold;">a</span> <span style="color: #c0c0c0;">{</span><span style="color: #ff4400; font-weight: bold;">color</span><span style="color: #c0c0c0;">:</span><span style="color: #c0c0c0;">#fff</span><span style="color: #c0c0c0;">;}</span><br /> <span style="color: #f810b0;">25</span> <span style="color: #ff4400; font-weight: bold;">dd</span> <span style="color: #ff4400; font-weight: bold;">a</span> <span style="color: #c0c0c0;">{</span><span style="color: #ff4400; font-weight: bold;">color</span><span style="color: #c0c0c0;">:</span><span style="color: #c0c0c0;">#000</span><span style="color: #c0c0c0;">;}</span><br /> <span style="color: #696969;">26</span> <span style="color: #ff4400; font-weight: bold;">ul</span> <span style="color: #c0c0c0;">{</span><span style="color: #ff4400; font-weight: bold;">list-style</span><span style="color: #c0c0c0;">:</span><span style="color: #ff4400; font-weight: bold;">none</span>;<span style="color: #ff4400; font-weight: bold;">padding</span><span style="color: #c0c0c0;">:</span><span style="color: #c0c0c0;">2px</span><span style="color: #c0c0c0;">;}</span><br /> <span style="color: #696969;">27</span> <span style="color: #ff4400; font-weight: bold;"></style></span><br /> <span style="color: #696969;">28</span> <span style="color: #ff4400; font-weight: bold;"></head></span><br /> <span style="color: #696969;">29</span> <span style="color: #ff4400; font-weight: bold;"><body></span><br /> <span style="color: #f810b0;">30</span> <span style="color: #ff4400; font-weight: bold;"><dl></span><br /> <span style="color: #696969;">31</span> <span style="color: #ff4400; font-weight: bold;"><dt><a</span> <span style="color: #ffff00;">href=</span><span style="color: #d13800;">“#”</span><span style="color: #ff4400; font-weight: bold;">></span>歌曲<span style="color: #ff4400; font-weight: bold;"></a></dt></span><br /> <span style="color: #696969;">32</span> <span style="color: #ff4400; font-weight: bold;"><dd></span><br /> <span style="color: #696969;">33</span> <span style="color: #ff4400; font-weight: bold;"><ul></span><br /> <span style="color: #696969;">34</span> <span style="color: #ff4400; font-weight: bold;"><li><a</span> <span style="color: #ffff00;">href=</span><span style="color: #d13800;">“#”</span><span style="color: #ff4400; font-weight: bold;">></span>歌曲1<span style="color: #ff4400; font-weight: bold;"></a></li></span><br /> <span style="color: #f810b0;">35</span> <span style="color: #ff4400; font-weight: bold;"><li><a</span> <span style="color: #ffff00;">href=</span><span style="color: #d13800;">“#”</span><span style="color: #ff4400; font-weight: bold;">></span>歌曲2<span style="color: #ff4400; font-weight: bold;"></a></li></span><br /> <span style="color: #696969;">36</span> <span style="color: #ff4400; font-weight: bold;"><li><a</span> <span style="color: #ffff00;">href=</span><span style="color: #d13800;">“#”</span><span style="color: #ff4400; font-weight: bold;">></span>歌曲3<span style="color: #ff4400; font-weight: bold;"></a></li></span><br /> <span style="color: #696969;">37</span> <span style="color: #ff4400; font-weight: bold;"><li><a</span> <span style="color: #ffff00;">href=</span><span style="color: #d13800;">“#”</span><span style="color: #ff4400; font-weight: bold;">></span>歌曲4<span style="color: #ff4400; font-weight: bold;"></a></li></span><br /> <span style="color: #696969;">38</span> <span style="color: #ff4400; font-weight: bold;"><li><a</span> <span style="color: #ffff00;">href=</span><span style="color: #d13800;">“#”</span><span style="color: #ff4400; font-weight: bold;">></span>歌曲5<span style="color: #ff4400; font-weight: bold;"></a></li></span><br /> <span style="color: #696969;">39</span> <span style="color: #ff4400; font-weight: bold;"></ul></span><br /> <span style="color: #f810b0;">40</span> <span style="color: #ff4400; font-weight: bold;"></dd></span><br /> <span style="color: #696969;">41</span> <span style="color: #ff4400; font-weight: bold;"><dt><a</span> <span style="color: #ffff00;">href=</span><span style="color: #d13800;">“#”</span><span style="color: #ff4400; font-weight: bold;">></span>艺人<span style="color: #ff4400; font-weight: bold;"></a></dt></span><br /> <span style="color: #696969;">42</span> <span style="color: #ff4400; font-weight: bold;"><dd></span><br /> <span style="color: #696969;">43</span> <span style="color: #ff4400; font-weight: bold;"><ul></span><br /> <span style="color: #696969;">44</span> <span style="color: #ff4400; font-weight: bold;"><li><a</span> <span style="color: #ffff00;">href=</span><span style="color: #d13800;">“#”</span><span style="color: #ff4400; font-weight: bold;">></span>艺人1<span style="color: #ff4400; font-weight: bold;"></a></li></span><br /> <span style="color: #f810b0;">45</span> <span style="color: #ff4400; font-weight: bold;"><li><a</span> <span style="color: #ffff00;">href=</span><span style="color: #d13800;">“#”</span><span style="color: #ff4400; font-weight: bold;">></span>艺人2<span style="color: #ff4400; font-weight: bold;"></a></li></span><br /> <span style="color: #696969;">46</span> <span style="color: #ff4400; font-weight: bold;"><li><a</span> <span style="color: #ffff00;">href=</span><span style="color: #d13800;">“#”</span><span style="color: #ff4400; font-weight: bold;">></span>艺人3<span style="color: #ff4400; font-weight: bold;"></a></li></span><br /> <span style="color: #696969;">47</span> <span style="color: #ff4400; font-weight: bold;"><li><a</span> <span style="color: #ffff00;">href=</span><span style="color: #d13800;">“#”</span><span style="color: #ff4400; font-weight: bold;">></span>艺人4<span style="color: #ff4400; font-weight: bold;"></a></li></span><br /> <span style="color: #696969;">48</span> <span style="color: #ff4400; font-weight: bold;"><li><a</span> <span style="color: #ffff00;">href=</span><span style="color: #d13800;">“#”</span><span style="color: #ff4400; font-weight: bold;">></span>艺人5<span style="color: #ff4400; font-weight: bold;"></a></li></span><br /> <span style="color: #696969;">49</span> <span style="color: #ff4400; font-weight: bold;"></ul></span><br /> <span style="color: #f810b0;">50</span> <span style="color: #ff4400; font-weight: bold;"></dd></span><br /> <span style="color: #696969;">51</span> <span style="color: #ff4400; font-weight: bold;"><dt><a</span> <span style="color: #ffff00;">href=</span><span style="color: #d13800;">“#”</span><span style="color: #ff4400; font-weight: bold;">></span>专辑<span style="color: #ff4400; font-weight: bold;"></a></dt></span><br /> <span style="color: #696969;">52</span> <span style="color: #ff4400; font-weight: bold;"><dd></span><br /> <span style="color: #696969;">53</span> <span style="color: #ff4400; font-weight: bold;"><ul></span><br /> <span style="color: #696969;">54</span> <span style="color: #ff4400; font-weight: bold;"><li><a</span> <span style="color: #ffff00;">href=</span><span style="color: #d13800;">“#”</span><span style="color: #ff4400; font-weight: bold;">></span>专辑1<span style="color: #ff4400; font-weight: bold;"></a></li></span><br /> <span style="color: #f810b0;">55</span> <span style="color: #ff4400; font-weight: bold;"><li><a</span> <span style="color: #ffff00;">href=</span><span style="color: #d13800;">“#”</span><span style="color: #ff4400; font-weight: bold;">></span>专辑2<span style="color: #ff4400; font-weight: bold;"></a></li></span><br /> <span style="color: #696969;">56</span> <span style="color: #ff4400; font-weight: bold;"><li><a</span> <span style="color: #ffff00;">href=</span><span style="color: #d13800;">“#”</span><span style="color: #ff4400; font-weight: bold;">></span>专辑3<span style="color: #ff4400; font-weight: bold;"></a></li></span><br /> <span style="color: #696969;">57</span> <span style="color: #ff4400; font-weight: bold;"><li><a</span> <span style="color: #ffff00;">href=</span><span style="color: #d13800;">“#”</span><span style="color: #ff4400; font-weight: bold;">></span>专辑4<span style="color: #ff4400; font-weight: bold;"></a></li></span><br /> <span style="color: #696969;">58</span> <span style="color: #ff4400; font-weight: bold;"><li><a</span> <span style="color: #ffff00;">href=</span><span style="color: #d13800;">“#”</span><span style="color: #ff4400; font-weight: bold;">></span>专辑5<span style="color: #ff4400; font-weight: bold;"></a></li></span><br /> <span style="color: #696969;">59</span> <span style="color: #ff4400; font-weight: bold;"></ul></span><br /> <span style="color: #f810b0;">60</span> <span style="color: #ff4400; font-weight: bold;"></dd></span><br /> <span style="color: #696969;">61</span> <span style="color: #ff4400; font-weight: bold;"><dt><a</span> <span style="color: #ffff00;">href=</span><span style="color: #d13800;">“#”</span><span style="color: #ff4400; font-weight: bold;">></span>年份<span style="color: #ff4400; font-weight: bold;"></a></dt></span><br /> <span style="color: #696969;">62</span> <span style="color: #ff4400; font-weight: bold;"><dd></span><br /> <span style="color: #696969;">63</span> <span style="color: #ff4400; font-weight: bold;"><ul></span><br /> <span style="color: #696969;">64</span> <span style="color: #ff4400; font-weight: bold;"><li><a</span> <span style="color: #ffff00;">href=</span><span style="color: #d13800;">“#”</span><span style="color: #ff4400; font-weight: bold;">></span>年份1<span style="color: #ff4400; font-weight: bold;"></a></li></span><br /> <span style="color: #f810b0;">65</span> <span style="color: #ff4400; font-weight: bold;"><li><a</span> <span style="color: #ffff00;">href=</span><span style="color: #d13800;">“#”</span><span style="color: #ff4400; font-weight: bold;">></span>年份2<span style="color: #ff4400; font-weight: bold;"></a></li></span><br /> <span style="color: #696969;">66</span> <span style="color: #ff4400; font-weight: bold;"><li><a</span> <span style="color: #ffff00;">href=</span><span style="color: #d13800;">“#”</span><span style="color: #ff4400; font-weight: bold;">></span>年份3<span style="color: #ff4400; font-weight: bold;"></a></li></span><br /> <span style="color: #696969;">67</span> <span style="color: #ff4400; font-weight: bold;"><li><a</span> <span style="color: #ffff00;">href=</span><span style="color: #d13800;">“#”</span><span style="color: #ff4400; font-weight: bold;">></span>年份4<span style="color: #ff4400; font-weight: bold;"></a></li></span><br /> <span style="color: #696969;">68</span> <span style="color: #ff4400; font-weight: bold;"><li><a</span> <span style="color: #ffff00;">href=</span><span style="color: #d13800;">“#”</span><span style="color: #ff4400; font-weight: bold;">></span>年份5<span style="color: #ff4400; font-weight: bold;"></a></li></span><br /> <span style="color: #696969;">69</span> <span style="color: #ff4400; font-weight: bold;"></ul></span><br /> <span style="color: #f810b0;">70</span> <span style="color: #ff4400; font-weight: bold;"></dd></span><br /> <span style="color: #696969;">71</span> <span style="color: #ff4400; font-weight: bold;"></dl></span><br /> <span style="color: #696969;">72</span> <span style="color: #ff4400; font-weight: bold;"></body></span><br /> <span style="color: #696969;">73</span> <span style="color: #ff4400; font-weight: bold;"></html></span>
</div>
<span style="color: #ff6600;"><a href="http://down.qiannao.com/space/file/flowerowl/-4e0a-4f20-5206-4eab/Lazy25_-5bfc-822a1.rar/.page" target="_blank"><span style="color: #ff6600;"> 下载源码</span></a></span>
转载请注明：[于哲的博客][1] » [jQuery 抄袭笔记(25) :导航1][2]
[1]: http://lazynight.me
[2]: http://lazynight.me/675.html
</li></span></li></span></li></span></li></span></li></span></ul></span></dd></span></dt></span></li></span></li></span></li></span></li></span></li></span></ul></span></dd></span></dt></span></li></span></li></span></li></span></li></span></li></span></ul></span></dd></span></dt></span></li></span></li></span></li></span></li></span></li></span></ul></span></dd></span></dt></span></dl></span></body></span>
02 “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
03 <html xmlns=“http://www.w3.org/1999/xhtml”>
04 </span>
05 <meta http-equiv=“Content-Type” content=“text/html; charset=gb2312″ />
06