javascript - 带有单击以在鼠标离开时显示和隐藏的 jQuery 菜单

Question

目前它显示 div 而不是隐藏它们，单击它会隐藏，以便您可以看到运动。应该是 .show 而不是 .hide。单击链接时， li 应向下滑动，而在 mouseleave 上应向上滑动。

工作示例http://jsfiddle.net/DTqDD/3/

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

Onli标签更改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;
}