The simplest pure JS realization clicks expands the two level menu function __js

Although, jquery has been very useful, but the actual development project, there are many restrictions, such as the project team of the requirements of the wonderful, can not use any plug-ins, of course, but also consider plug-ins to occupy resources, after all, 100+kb and small projects is still very large. I recently encountered to do a click to expand the level two menu requirements, of course, only with the original JS to write to achieve, I borrowed a case on the web, add, share:

If the default open page comes in the level two menu is hidden, you need to click to show level Two menu, and then click to hide Level two menu. Here are two points to implement the show and hide with display= "block" and display= "none", and the other is to make a judgment, if else's judgment is currently block or none.

<!
	DOCTYPE html> One thing to note is that Li in the first-level menu cannot add a label, otherwise it will not work.

If your page defaults to the two level menu is displayed, click to close. You can simply remove the style label's display= "None". At the same time need to modify JS.


<script type= "Text/javascript" >
		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";
                    
            }
		
	</script>
 

Look carefully, or you will find that you need to click two times before the desired effect appears.