我已经在我们的网站上获得了这个导航菜单,该菜单已经在stackoverflow上获得了社区的一些帮助。但我需要更多一点。
现在,如果有人点击位于顶部的商店链接,则会出现珠宝和定制的儿童元素。
然而,如果我们点击3级的项链,我们就会让整个菜单消失。
我尝试了多种不同的方法让第三个元素保持在屏幕上,但是没有运气。
我认为是一个jquery函数,如果点击的项目是第三个或第二个项目,则获取父母和祖父母的索引。这样,此级别的导航对用户保持可见。
<script>
$("#navigation ul li ul").hide();
$(".is-current").parent().parent().parent().siblings().show();
</script>
我们在第3级项目上进行了当前标识,但我们希望显示父项目以及所有子项目及其兄弟项目,以便在用户单击第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>
答案 0 :(得分:0)
这是你要找的吗? http://jsfiddle.net/D3fbC/
的javascript:
$(function(){
$('#navigation').find('a').click(function(e){
e.preventDefault();
$(this).parent('li').find('li').toggle();
});
});