[jQuery] not selector使用

因為最近在協助設計改一些效果有用到
需求是希望在

<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();
  });
});

留言

這個網誌中的熱門文章

[MySQL] schema 與資料類型優化

[翻譯] 介紹現代網路負載平衡與代理伺服器