javascript - マウスリーブでクリックして表示および非表示にするjQueryメニュー

Question

現時点では、div を非表示にする代わりに表示し、クリックすると非表示になるので、動きを確認できます。.hide ではなく .show にする必要があります。リンクをクリックすると、li が下にスライドし、マウスを離すと上にスライドします。

作業例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

有効な HTML ではないため、タグliが に変わります。次に、次の jQuery コードを使用します。id="mainmenudrop"class="mainmenudrop"

$(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;
}