Question

点击li或href后，菜单即会打开。这是一个水平菜单，ul中包含一个li和多个div。可以用多个ul来做，但我不愿意，因为它太重了。

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关闭的用户，您还需要进行某种类型的退回。

菜单切换不起作用的jquery

1 个答案: