ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryマルチレベルドロップダウンメニューcore code_jquery
jqueryマルチレベルドロップダウンメニューcore code_jquery
- WBOYオリジナル
- 2016-05-16 18:26:431002ブラウズ
jquery
$( document).ready(function(){
$("ul li").hover(function(){
$(this).find("ul:first").show();//マウスover to find li の下の最初の ul が表示されます。
},function(){
$(this).find("ul:first").hide();//マウスはその ul を残します。 li の下に d を隠します ;
})
$("ul li ul li ul").prev().addClass("bbb");//li の下の ul が aaa である前の兄弟要素に css を追加しますスタイル;
})
css
ul, li{padding:0;margin:0;}
ul li{float:left;;margin-right:1px;display:inline;list- style:none;text-align:center;}
ul li ul li{float:none;background:#ccc;margin-bottom:1px;display:block;_display:inline;position:relative;}
ul li ul{表示: なし;}
ul a{テキスト装飾:なし;幅:80px;高さ:20px;行の高さ:20px;表示:ブロック;背景:#bbb;フォントサイズ:12px}
ul li a :hover{background:#eee;color:#000}
ul li ul li .aaa{position:absolute;left:80px;top:0;border-left:1px Solid #fff}
ul li ul li .aaa li{float:none;}
body .bbb{background:#f00;color:#fff}
html
コードをコピー コードは次のとおりです。
$( document).ready(function(){
$("ul li").hover(function(){
$(this).find("ul:first").show();//マウスover to find li の下の最初の ul が表示されます。
},function(){
$(this).find("ul:first").hide();//マウスはその ul を残します。 li の下に d を隠します ;
})
$("ul li ul li ul").prev().addClass("bbb");//li の下の ul が aaa である前の兄弟要素に css を追加しますスタイル;
})
css
コードをコピーコードは次のとおりです:
ul, li{padding:0;margin:0;}
ul li{float:left;;margin-right:1px;display:inline;list- style:none;text-align:center;}
ul li ul li{float:none;background:#ccc;margin-bottom:1px;display:block;_display:inline;position:relative;}
ul li ul{表示: なし;}
ul a{テキスト装飾:なし;幅:80px;高さ:20px;行の高さ:20px;表示:ブロック;背景:#bbb;フォントサイズ:12px}
ul li a :hover{background:#eee;color:#000}
ul li ul li .aaa{position:absolute;left:80px;top:0;border-left:1px Solid #fff}
ul li ul li .aaa li{float:none;}
body .bbb{background:#f00;color:#fff}
html
コードをコピー コードは次のとおりです:
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。