需要通過jquery顯示無序列表的父項和兄弟項目

Question

我已經在我們的網站上獲得了此導航菜單，這裏已經有來自社區的一些很好的幫助。但我需要更多一點。

現在，如果有人點擊位於頂部的店鋪鏈接，就會出現珠寶和定製的子元素。

但是，如果我們點擊了3個級別的項鍊，我們就會讓整個菜單消失。

我試過了很多不同的方法來獲得第三個元素，以保持其父母和祖父母留在屏幕上，但沒有運氣。

什麼即時通訊的想法是一個jquery函數，獲取父母和祖父母的索引，如果被點擊的項目是第三或第二項下來。通過這種方式，這種級別的導航保持對用戶可見。

<script> 
$("#navigation ul li ul").hide(); 
$(".is-current").parent().parent().parent().siblings().show(); 
</script> 

我們已經是電流確定在第三級的項目，但是如果用戶點擊3日，我們將要顯示的父項和所有子項和他們的兄弟姐妹，使菜單出現縮進和可見級別的項目。我已經通過js小提琴嘗試了上面的jquery代碼......但由於我相對jquery缺乏經驗......我正在努力研究這是如何實現的。任何建議不勝感激

<div id="navigation"> 
    <ul id="jsddm" class="dbtree"> 
    <li id="SHOP"> <a href="...">SHOP</a> 
     <ul> 
     <li id="JEWELLERY"> <a href="...">JEWELLERY</a> 
      <ul> 
      <li id="NECKLACES" class="is-current"><a href="...">NECKLACES</a></li> 
      </ul> 
      <ul> 
      <li id="RINGS"><a href="...">RINGS</a></li> 
      </ul> 
      <ul> 
      <li id="EARRINGS"><a href="...">EARRINGS</a></li> 
      </ul> 
      <ul> 
      <li id="FRIENDSHIP BRACELETS"><a href="...">FRIENDSHIP BRACELETS</a></li> 
      </ul> 
      <ul> 
      <li id="CHARM BRACELETS"><a href="...">CHARM BRACELETS</a></li> 
      </ul> 
     </li> 
     </ul> 
     <ul> 
     <li id="BESPOKE"><a href="...">BESPOKE</a> 
      <ul> 
      <li id="MAKE YOUR BESPOKE "><a href="...">MAKE YOUR BESPOKE</a></li> 
      </ul> 
      <ul> 
      <li id="CHAINS"><a href="...">CHAINS</a></li> 
      </ul> 
      <ul> 
      <li id="LETTERS"><a href="...">LETTERS</a></li> 
      </ul> 
      <ul> 
      <li id="CRYSTALS"><a href="...">CRYSTALS</a></li> 
      </ul> 
      <ul> 
      <li id="GEMSTONES"><a href="...">GEMSTONES</a></li> 
      </ul> 
      <ul> 
      <li id="CHARMS"><a href="...">CHARMS</a></li> 
      </ul> 
      <ul> 
      <li id="COLOURED CORD"><a href="...">COLOURED CORD</a></li> 
      </ul> 
     </li> 
     </ul> 
     <ul> 
     <li id="KA FINES (coming soon)"><a href="...">KA FINES (coming soon)</a></li> 
     </ul> 
     <ul> 
     <li id="GIFT VOUCHER"><a href="...">GIFT VOUCHER</a></li> 
     </ul> 
     <ul> 
     <li id="MY DETAILS"><a href="...">MY DETAILS</a></li> 
     </ul> 
     <ul> 
     <li id="MY HISTORY"><a href="...">MY HISTORY</a></li> 
     </ul> 
     <ul> 
     <li id="LOGOUT"><a href="...">LOGOUT</a></li> 
     </ul> 
    </li> 
    </ul> 
    <ul> 
    <li id="BESPOKE"> <a href="...">BESPOKE</a> 
     <ul> 
     <li id="ABOUT"><a href="...">ABOUT</a></li> 
     </ul> 
     <ul> 
     <li id="LOOKBOOK "><a href="...">LOOKBOOK</a></li> 
     </ul> 
     <ul> 
     <li id="MAKE YOUR BESPOKE"><a href="...">MAKE YOUR BESPOKE</a></li> 
     </ul> 
    </li> 
    </ul> 
    <ul> 
    <li id="LOOKBOOK "><a href="...">LOOKBOOK</a> 
     <ul> 
     <li id="BESPOKE LOOKBOOK"><a href="...">BESPOKE LOOKBOOK</a></li> 
     </ul> 
     <ul> 
     <li id="SOMETHING LIKE PARADISE"><a href="...">SOMETHING LIKE PARADISE</a></li> 
     </ul> 
    </li> 
    </ul> 
    <ul> 
    <li id="OUR STORY"><a href="...">OUR STORY</a></li> 
    </ul> 
    <ul> 
    <li id="PRESS"><a href="...">PRESS</a></li> 
    </ul> 
    <ul> 
    <li id="BLOG"><a href="...">BLOG</a></li> 
    </ul> 
</div> 

Answer 1

這是你在找什麼？ http://jsfiddle.net/D3fbC/

的javascript：

$(function(){ 
    $('#navigation').find('a').click(function(e){ 
     e.preventDefault(); 
     $(this).parent('li').find('li').toggle(); 
    }); 
});