Question

我几乎完成了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; }

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

Answer 1

这对你有用：

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

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

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

});

Answer 2

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

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

Answer 3

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

Answer 4

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

在JavaScript和CSS中的树视图菜单？

我的Css：

4 个答案: