jquery - 没有双下拉菜单的jQuery点击事件

Question

我是 jQuery 的新手。我想用点击事件制作一个简单的下拉菜单。这是html结构：

<ul id="menubar">
        <li class="menu">
            <a href="#">Menu 1</a>
            <ul class="submenubar">
                <li class="submenu"><a href="#">Submenu 1</a></li>
            </ul>
        </li>
        <li class="menu">
            <a href="#">Menu 2</a>
            <ul class="submenubar">
                <li class="submenu"><a href="#">Submenu 2</a></li>
            </ul>
        </li>
</ul>​

我制作的脚本如下：

$(document).ready(function(){
            $('li.submenu').hide()
            $('li.menu').click(function(e){
                $(this).find('li.submenu', this).slideToggle('fast'); 
                e.stopPropagation();
            })
        })​

但下拉是重叠的。那不是我想要的。我想要的是： - 如果我单击菜单 1，它将显示子菜单 1。其他菜单和子菜单被隐藏。- 然后如果我单击菜单 2，子菜单 2 将显示为子菜单 1 将被隐藏。- 等等...

我应该怎么办？有人可以帮我解决这个问题吗？感谢您的答复..

Answer 1

嘿检查一下点击menu1它会显示submenu1再次隐藏其他当你点击menu1然后它会menu2会显示试试这个

http://jsfiddle.net/96xnB/