0

我几乎完成了 css 来制作树形视图菜单。但问题是树只能在鼠标悬停时工作。我想通过单击链接打开和关闭树。

我的 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; }

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

4

4 回答 4

2

这对你有用：

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

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

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

});
于 2012-09-28T17:49:03.870 回答
2

您可以使用此 jquery 插件轻松实现您想要的http://bassistance.de/jquery-plugins/jquery-plugin-treeview/

演示 http://jquery.bassistance.de/treeview/demo/prerendered.html

于 2012-10-11T14:23:44.430 回答
0

CSS 无法响应点击。最好使用 Jquery 切换功能。

于 2012-09-28T17:48:06.903 回答
0

看看 javascript 的方便和（看似）广泛使用的 onclick 功能......！

于 2012-09-28T17:48:42.253 回答