Question

此刻它显示div而不是隐藏它们并且点击它隐藏它只是为了你可以看到运动。应该是.show而不是.hide。在点击链接时，li应向下滑动并在mouseleave上向上滑动。

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('ul').not('ul#mainmenu');
         } else if (elemType === 'ul') {
             //mouseleft ul, ergo menu is this.
             menu = self;
         }
         if (menu) {
             menu.hide('medium');
         }
         e.preventDefault();
         return false;
     };

    $(document).ready(function() {
         $('a.drop').click(function(e) {
             $('li#mainmenudrop').show('medium');
             console.log('div clicked');
             e.preventDefault();
             return false;
         });
         $('li#mainmenudrop a').click(toggleMenu);
         $('li#mainmenudrop').mouseleave(toggleMenu);
     });
 });

Answer 1

在li代码上将id="mainmenudrop"更改为class="mainmenudrop"，因为它不是有效的HTML。然后使用以下jQuery代码。

$(document).ready(function() {
     $('a.drop').click(function(e) {
         $(this).next("div").show('medium');
         console.log('div clicked');
         e.preventDefault();
         return false;
     });
    $('li.mainmenudrop').mouseleave(function() {
        $(this).children("div").hide('medium');
    });
});

这可能是你想要完成的事情吗？

修改如果你想在开头隐藏div，只需添加这个CSS：

.mainmenudrop div { display: none; }

jQuery菜单，单击以显示并隐藏在mouseleave上

1 个答案: