0

liまたはをクリックするhrefと、メニューが開きます。ulこれは、 に 1 つおよび複数liの が含まれる水平メニュー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);
    });
});
4

1 に答える 1

0

あなたはこれを必要以上に難しくしています。

マークアップと JS にも問題があります

href.drop は a.drop であるべきだった

また、余分な終了div。

しかし、それだけではありません。その JS コードのすべてが必要なわけではありません。

http://jsfiddle.net/DTqDD/

注: また、JavaScript をシャットオフしているユーザーのために、何らかの種類のフォールバックを作成することもできます。

于 2012-07-14T07:02:21.223 に答える