最も簡単な純粋なjsはクリックして2級のメニューの機能を展開することを実現します

jQueryはもうとても使いやすいですが、実際の開発プロジェクトでは、プロジェクトグループの奇抜な要求など、プラグインを使用することはできません.もちろん、プラグインのリソース占有も考慮しています.結局、100+KBは小型プロジェクトにとって非常に大きいです.私は最近クリックして2級のメニューを展開する要求に出会って、もちろん原生のJSで書くことしかできなくて実現して、私はネット上の1つのケースを参考にして、補充して、分かち合います:
もし、デフォルトでページを開いて入ってきたときに二級メニューが非表示になっていたら、二級メニューを表示するにはクリックする必要があります.またクリックすると二級メニューが非表示になります.ここでは2つの点があり,実装実装はdisplay=「block」とdisplay=「none」であり,if elseの判断は現在blockかnoneかである.

	
	
	


	

		
    1
			

				
    1
				
    1
				
    1
				
    1
			
		
		
    2
			

				
    2
				
    2
				
    2
				
    2
			

		
		
    3
	
	
		function f(str){
                var sub_menu = document.getElementById(str);
                var dis_v = sub_menu.style.display;
                
                if(dis_v == "block")
                    sub_menu.style.display = "none";
                else
                    sub_menu.style.display = "block";
                    
            }
		
	

一級メニューのliはaラベルを追加できません.そうしないと役に立たないことに注意してください.
もし、あなたのページがデフォルトで2級メニューが表示されている場合は、クリックすると閉じます.スタイルラベルのスタイルdisplay=「none」をそのまま外せばOKです.同時にjsを修正する必要があります.

		function f(str){
                var sub_menu = document.getElementById(str);
                var dis_v = sub_menu.style.display;
                
                if(dis_v == "none")
                    sub_menu.style.display = "block";
                else
                    sub_menu.style.display = "none";
                    
            }
		
	

よく見てください.そうしないと、2回クリックしなければ効果が現れません.