[英]Hide/Show sub menu
我想使用jQuery隱藏/顯示子菜單。
因此,最初“項目”將僅可見。 單擊后,將顯示子菜單。
我已經附加了當前的HTML代碼:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <div class="menu-primary-menu-container"> <ul id="menu-primary-menu" class="menu"> <li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-27"><a href="#">Projects</a> <ul> <li id="menu-item-26" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-26"><a href="/category/projects/residential/">Residential</a></li> <li id="menu-item-24" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-24"><a href="/category/projects/private/">Private</a></li> </ul> </li> </ul> </div>
這是我的演示: http : //jsfiddle.net/76Lr33ap/
您可以綁定click()
事件處理程序的a
$('#menu-primary-menu>li>a').click(function() { $(this).next().toggle(); // if there is any other element after a the use // $(this).parent().find('ul').toggle(); // also if you need any better effect then use // slideToggle() or fadeToggle instead of toggle() });
#menu-primary-menu>li>ul { display: none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <div class="menu-primary-menu-container"> <ul id="menu-primary-menu" class="menu"> <li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-27"><a href="#">Projects</a> <ul> <li id="menu-item-26" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-26"><a href="/category/projects/residential/">Residential</a> </li> <li id="menu-item-24" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-24"><a href="/category/projects/private/">Private</a> </li> </ul> </li> </ul> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.