javascript - javascript 和 css 中的 TreeView 菜单？

Question

我几乎完成了 css 来制作 TreeView 菜单。但问题是树只适用于鼠标悬停。我想通过单击链接打开和关闭树。

我的 HTML 是:

<div id="global-nav">
        <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
            <li><a href='#' class="sidemenu-sub-menu-header">Four</a>
            <ul>
                <li><a href="#">1.2 One</a></li>
                <li><a href="#">1.2 two</a></li>
            </ul></li>
        </ul>
</div>

我的CSS:

.sidemenu-sub-menu-header { font-weight: bold; color: black;}


#global-nav {font-size: 17px; }
#global-nav ul li{padding: 2px 10px 2px 10px;}
#global-nav ul ul li{ display: none;}
#global-nav li:hover ul li { display: block; }

我只需要一个小脚本来打开菜单并像切换栏一样关闭菜单。谢谢

Answer 1

这对你有用:

$('#global-nav li a').click(function(){

   var nextUl = $(this).next('ul');

   if(nextUl[0] != undefined){
     nextUl.toggle(); //Alternate the visibility
   };

});