jsナビゲーションメニュー(自作)はシンプルでエレガント

最近、プロジェクトにはシンプルなマルチレベルのドロップダウン メニューが必要になりました。しかし、ビジネスとスタイルの要件により、インターネット上にある多くのナビゲーション メニュー コントロールはシンプルにするのに適していないため、突然自分で作成することを思いつきました。 ~ 時間になったらやってください。ああ~ HTML 部分

コードをコピーします コードは次のとおりです: SuperFish レベル 1 li 1 レベル 2 li 1 レベル 2 li 2 レベル 3 li 1 レベル 3 li 2 レベル 3 li 3 レベル 3 li 4&lt ;/a> レベル 3 li 5 レベル 3 li 6 ul> a href="javascript:void(0)" testid="jj">レベル 4 li 1 ;a href="javascript:void(0) " testid="kk">レベル 4 li 2 レベル 2 li 3 🎜> レベル 3 li 6 レベル 3 li 7 レベル 3 li 8 レベル 3 li 9 レベル 3 li 10 2 li 4 レベル 3 li 11 ;/li> レベル 3 li 12 ; レベル 3 li 13 レベル 3 li 14 ;li> レベル li 2 レベル 11

Javascript 部分

コードをコピー

コードは次のとおりです: var NavigationBar = function () { //使用する場合は、testid 属性を href 属性に置き換えます。 🎜>var currentUrlHref = "jj"; var root = $("ul[hid='root']"); $(root).find(">li").attr("first_level) ", true); $(root).find(">li>a").addClass("nav_first_style"); //展開可能な要素を再帰的に検索し、展開切り替えイベントをバインドします var searchChildren = function (root) { if (root.find(">li").length > 0) { $(root).addClass("ul_style") var liChildren = root.find(">li"); $(liChildren).each(function (idx, item) { searchChildren($(item)); }) } if (root.find(">ul").length > 0) { $(root).addClass("li_style"); if ($(root).attr("first_level "); != true.toString()) { $(root).find(">a").addClass("li_style_a"); } var aLink = $(root). ">a"); //初期読み込み中に、現在の URL がナビゲーション バーの内容と一致するかどうかを判断します if (currentUrlHref == $(aLink).attr("testid")) { findInitPosition(aLink); } $(aLink).toggle(function () { $(this).addClass("li_style_a_selected"); $(this).parent( ).find(">ul").show("fast"); //第 1 レベル以外のノードの下にあるすべての兄弟要素を非表示にします if ($(this).parent().attr ( "first_level") != true.toString()) { $(this).parent().siblings().find(">a").removeClass("li_style_a_selected"); this).parent().siblings().each(function (idx, item) { removeClassAndHide(item); }) } else { $(this).addClass( " nav_first_style_selected"); $(this).removeClass("li_style_a_selected"); $(this).parent().siblings().find(">a").removeClass("nav_first_style_selected" ) ; $(this).parent().siblings().each(function (idx, item) { removeClassAndHide(item); }) } }, function ( ) { if ($(this).parent().attr("first_level") == true.toString()) { $(this).addClass("nav_first_style_selected"); (this).parent().siblings().find(">a").removeClass("nav_first_style_selected"); } removeClassAndHide($(this).parent()); }) var ulChildren = root.find(">ul"); $(ulChildren).each(function (idx, item) { $(item).hide(); searchChildren($(item)); } else { if ($(root).attr("first_level") != true.toString()) { $ (root).find(">a").addClass("li_style_a"); } $(root).addClass("li_style"); () { if ($(root).attr("first_level") != true.toString()) { $(this).find(">a").addClass("li_style_a_selected " ); $(this).siblings().find(">a").removeClass("li_style_a_selected"); $(this).siblings().each(function (idx, item ) { removeClassAndHide(item); addFirstLevelClass(item); }) } else { $(this).find(">a").addClass("nav_first_style_selected") ); $(this).find(">a").removeClass("li_style_a_selected"); $(this).siblings().find(">a").removeClass( " nav_first_style_selected"); removeClassAndHide(this); } }) if (currentUrlHref == $(root).find(">a").attr("testid") ) { findInitPosition($(root).find(">a")); } } } //初期位置を再帰的に検索します var findInitPosition = function (aLink) { var currentLi = $(aLink).parent(); if ($(currentLi).parent().parent().find(">a").length > 0 ) { findInitPosition($(currentLi).parent().parent().find(">a")); } if ($(currentLi).find(">ul ").length > 0) { $(currentLi).find(">ul").show("fast"); } if ($(currentLi).attr(" first_level") != true.toString()) { $(currentLi).find(">a").addClass("li_style_a_selected"); } else { $(currentLi). find(">a").addClass("nav_first_style_selected"); } } //すべての子ノードの選択されたスタイルを再帰的に削除します var RemoveClassAndHide = function (li) { if ($(li).attr("first_level") != true.toString()) { $(li).find(">a").removeClass("li_style_a_selected"); >$(li).find(">ul").hide("fast"); if ($(li).find(">ul").length > 0) { $(li).find(">ul>li").each(function (idx, item) { removeClassAndHide(item); }); else if ( $(li).attr("first_level") == true.toString()) { $(li).find(">ul").hide("fast"); ).find(">ul>li").each(function (idx, item) { removeClassAndHide(item); }) } else { $(li). (">ul").show("fast"); $(li).find(">ul>li").each(function (idx, item) { removeClassAndHide(item ) ; }) } } //第 1 レベルのノード スタイルを上向きに再帰的に追加します var addFirstLevelClass = function (li) { if ($(li).attr ( "first_level") != true.toString()) { addFirstLevelClass($(li).parent().parent());else { if (!$(li).find(">a").hasClass("nav_first_style_selected")) { $(li).find(">a").addClass(" nav_first_style_selected"); $(li).siblings().find(">a").removeClass("nav_first_style_selected"); } } } //作成Navigation var createNav = function () { searchChildren(root); createNav(); var initNav = new NavigationBar(); /script>

ただし、まだ jquery のような記述メソッドにカプセル化されていません。実際には、引き続きコントロールにカプセル化できます~

jsナビゲーションメニュー(自作)はシンプルでエレガント_基礎知識

SuperFish