jquery - 菜单切换不起作用 jquery

Question

单击li或href时，应打开菜单。它是一个水平菜单，其中包含一个ul和多个li's div。可能可以用多个ul's 来做到这一点，但我宁愿不这样做，因为它的代码太重了。

HTML

   <ul id="mainmenu" style="width:720px">

    <!-- 1Open -->
          <li id="mainmenudrop"><a href class="drop">helloooo</a>
             <div style="width:200px height:40px; background:#000000;">hmmmmfyhyf
</div>
         </li>
    <!-- 1 Close -->
    <!-- 2nd Open -->
         <li><a href="" class="drop">hello</a>
            <div style="width100px; height:40px; background:#000000;">
              yhythyytyt
              </div>
            </div></li> 
    <!-- 2nd Close --> 
</ul>

jQuery：

$(function() {
    var toggleMenu = function(e) {
        var self = $(this),
            elemType = self[0].tagName.toLowerCase(),
            //get caller
            menu = null;
        if (elemType === 'a') {
            //anchor clicked, nav back to containing ul
            menu = self.parents('li').not('li#mainmenudrop');
        } else if (elemType === 'li') {
            //mouseleft ul, ergo menu is this.
            menu = self;
        }
        if (menu) {
            menu.hide('medium');
        }
        e.preventDefault();
        return false;
    };
    $(document).ready(function() {
        $('href.drop').click(function(e) {
            $('li#mainmenudrop li').show('medium');
            console.log('div clicked');
            e.preventDefault();
            return false;
        });
        $('li#mainmenudrop a').click(toggleMenu);
        $('li#mainmenudrop li').mouseleave(toggleMenu);
    });
});

Answer 1

你使这比它需要的要困难得多。

您的标记和 JS 也有问题

href.drop 应该是 a.drop

还有一个额外的关闭 div。

但除此之外，你不需要所有的 JS 代码

http://jsfiddle.net/DTqDD/

注意：您还需要为关闭 JavaScript 的用户提供某种类型的回退。