ホームページ > 記事 > ウェブフロントエンド > jquery_jquery に基づいた 3 レベルのドロップダウン メニューの実装
jquery_jquery に基づいた 3 レベルのドロップダウン メニューの実装
- WBOYオリジナル
- 2016-05-16 09:00:082629ブラウズ
この記事の例では、参考のために jquery の 3 レベルのドロップダウン メニューの具体的な実装コードを共有します。具体的な内容は次のとおりです。
これを書くときは、まず自分の考えを明確にする必要があります。 1 つのメニューをクリックすると他のメニューが閉じられ、第 1 レベルのメニューをクリックすると第 2 レベルと第 3 レベルのメニューが閉じる、というようになります。
おおよそのコードは次のとおりです。
<body>
<aside>
<ul class="one">
<li> <a href="#" class="a">目录A</a>
<ul class="two" style="display: none">
<li><a href="#" class="a">二级目录A</a>
<ul class="three" style="display: none">
<li><a href="#">三级目录A</a></li>
</ul>
</li>
<li><a href="#" class="a">二级目录B</a></li>
<li><a href="#" class="a">二级目录C</a></li>
</ul>
</li>
<li> <a href="#" class="a">目录B</a>
<ul class="two" style="display: none">
<li><a href="#" class="a">二级目录A</a>
<ul class="three" style="display: none">
<li><a href="#">三级目录A</a></li>
</ul>
</li>
<li><a href="#" class="a">二级目录B</a></li>
<li><a href="#" class="a">二级目录C</a></li>
</ul>
</li>
<li> <a href="#" class="a">目录C</a> </li>
</ul>
</aside>
//jQuery部分
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function() {
$('.a').click(function() {
if ($(this).siblings('ul').css('display') == 'none') {
$(this).siblings('ul').slideDown(100).children('li');
if ($(this).parents('li').siblings('li').children('ul').css('display') == 'block') {
$(this).parents('li').siblings('li').children('ul').slideUp(100);
}
} else {
//控制自身菜单下子菜单隐藏
$(this).siblings('ul').slideUp(100);
//控制自身菜单下子菜单隐藏
$(this).siblings('ul').children('li').children('ul').slideUp(100);
}
});
});
</script>
</body>
スタイルを追加する場合は、必ず注意してください。そうしないと、メニューにエラーが表示される可能性があります。
完全なコード アドレス: https://github.com/sabrinatian/threemenunav.git
git にもアイコンが付いている場合がありますが、クリックしないとアイコンが表示されますが、メニューが開くと - アイコンに変わります。
以上がこの記事の全内容となりますが、皆様の学習のお役に立てれば幸いです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。