基于“单击"而不是悬停的多级菜单导航 [英] Multilevel menu navigation based on 'click' and not hover

问题描述

我没有遇到基于单击打开子菜单的多级菜单，因为大多数现有菜单都使用悬停效果.谁能指出我在哪里可以找到教程?我已经准备好所有标签，但是不知道如何利用jquery使其像普通的多级菜单一样工作.预先感谢

<ul id="suckertree1">

<li><a href='javascript:void(0)' target='_top'>Another child asd asd asd asd ad adas dasfe a sde fea rea</a>
    <ul class=''>
        <li><a href='http://localhost/private/product/40' target='_top'>cceeeeeooo</a></li>
        <li><a href='http://localhost/private/product/13' target='_top'>child of</a></li>
        <li><a href='javascript:void(0)' target='_top'>eawaa 5</a>
            <ul class=''>
                <li><a href='http://localhost/private/product/19' target='_top'>cccc</a></li>
            </ul>
        </li>
        <li><a href='http://localhost/private/product/14' target='_top'>errrr</a></li>
        <li><a href='http://localhost/private/product/2' target='_top'>jonni</a></li>
        <li><a href='http://localhost/private/product/29' target='_top'>Lumpur</a></li>
        <li><a href='http://localhost/private/product/41' target='_top'>makemefeel</a></li>
        <li><a href='http://localhost/private/product/16' target='_top'>sadsadsa</a></li>
    </ul>
</li>
</ul>

解决方案

不知道教程，但是这是一个例子. 非常快-相当脏，但我希望它能使您走上正确的轨道. 我加入<span />的原因是，您仍然可以单击顶级链接.它还用于提供视觉提示.

根据您的设计，您可能需要添加一些代码以在单击文档的其他位置时隐藏下拉菜单.

希望这会有所帮助

i have not come across a multilevel menu that based on clicking to open the submenus because most of the existings ones are using hover effect. Could anyone point out to me where i could find a tutorial? I have all the tags ready made but do not know how to utilize jquery to make it work as the normal multilevel menu. Thanks in advance

<ul id="suckertree1">

<li><a href='javascript:void(0)' target='_top'>Another child asd asd asd asd ad adas dasfe a sde fea rea</a>
    <ul class=''>
        <li><a href='http://localhost/private/product/40' target='_top'>cceeeeeooo</a></li>
        <li><a href='http://localhost/private/product/13' target='_top'>child of</a></li>
        <li><a href='javascript:void(0)' target='_top'>eawaa 5</a>
            <ul class=''>
                <li><a href='http://localhost/private/product/19' target='_top'>cccc</a></li>
            </ul>
        </li>
        <li><a href='http://localhost/private/product/14' target='_top'>errrr</a></li>
        <li><a href='http://localhost/private/product/2' target='_top'>jonni</a></li>
        <li><a href='http://localhost/private/product/29' target='_top'>Lumpur</a></li>
        <li><a href='http://localhost/private/product/41' target='_top'>makemefeel</a></li>
        <li><a href='http://localhost/private/product/16' target='_top'>sadsadsa</a></li>
    </ul>
</li>
</ul>

解决方案

Don't know of a tutorial but here is an example. Very quick - rather dirty but I hope it will get you on the right track. The reason I have included <span />s is so you can still follow the top level link. It is also used to gives a visual cue.

Depending on your design you may want to include a bit of code to hide the drop down when you click elsewhere on the document.

Hope this helps

这篇关于基于“单击"而不是悬停的多级菜单导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！