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);
});
});