[jQuery] not selector使用
因為最近在協助設計改一些效果有用到
需求是希望在
滑鼠移動到ul.funlist中的項目時
上一層的<a>不要被加上變色的class
所以主要是要排除li#except-li
故利用
var navLi=$("ul.page_nav- li:not(#except-li)");
排除li#except-li
變色的js如下
需求是希望在
<ul class="page_nav-"> <li> <a href="/C28_sofachair.html">客廳沙發座椅</a> <div class="pagemega" style="display: none;"> <ul> <li><a href="/S35_sofa.html">皮沙發</a></li> <li><a href="/S36_sofa.html">布沙發</a></li> <li><a href="/S37_sofa.html">L型沙發/沙發組</a></li> </ul> </div> </li> <li id="except-li"> <a href="/C31_bedroom.html">臥室床組</a> <div class=""> <ul class="funlist"> <li><a href="/S54_zzzz.html" class="pagemega-seleted">單人床組/架</a></li> <li><a href="/S55_xxxxx.html" class="">雙人床組/架</a></li> <li><a href="/S56_ccccc.html" class="">加大床組/架</a></li> <li><a href="/S60_bbbb.html" class="">床頭片/床頭箱</a></li> </ul> </div> </li> </ul>
滑鼠移動到ul.funlist中的項目時
上一層的<a>不要被加上變色的class
所以主要是要排除li#except-li
故利用
var navLi=$("ul.page_nav- li:not(#except-li)");
排除li#except-li
變色的js如下
$(document).ready(function(){ var navLi=$("ul.page_nav- li:not(#except-li)"); $('.pagemega').hide(); navLi.mouseover(function () { $(this).find("a:first").addClass("current"); $(this).find(".pagemega").stop().show(); }); navLi.mouseleave(function(){ $(this).find("a:first").removeClass("current"); $(this).find(".pagemega").stop().hide(); }); });
留言
張貼留言