Source code analysis of the left-side telescopic navigation and the scaling navigation source code
The source code of our analysis is from webmaster materials.
The address is as follows:
Http:// SC .chinaz.com/jiaoben/150228195730.htm
We recommend that you go to the above address and check the dynamic effect.
Second-level navigation now Let's analyze the code
<Html>
Focus on js
<script type="text/javascript">$(document).ready(function() {$(".div2").click(function() {$(this).next("div").slideToggle("slow").siblings(".div3:visible").slideUp("slow");});$(".level3").click(function() {$(this).next("div").slideToggle("slow").siblings(".div4:visible").slideUp("slow");});});</script>
We call div2 Level 1 (such as basic management) as the level 1 title. Each Level 1 title has a level 2 Title (that is, div3 ).
Because the order of div placement is one div2, one div3, and another div2.
$ (This). next ("div"). slideToggle ("slow ")
After you click div2, the following div3 is displayed from show to hide, and from hide to show.
. Siblings (". div3: visible ")
After running the code segment a, the object is div3.
The first half of section B is to select all visible div3
. Siblings (". div3: visible"). slideUp ("slow ");
Then hide them
The function of section B code is that when the level-2 menu of basic management is opened, click the News Center and the level-2 menu of basic management is also closed.
After reading the above Code, we try to rewrite the original level-2 menu to a level-3 menu.
The third-level navigation is as follows:
JavaScript is as follows:
<script type="text/javascript"><span style="white-space:pre"></span>$(document).ready(<span style="white-space:pre"></span>function() {<span style="white-space:pre"></span>$(".div2").click(<span style="white-space:pre"></span>function() {<span style="white-space:pre"></span>$(this).next("div").slideToggle("slow").siblings(<span style="white-space:pre"></span>".div3:visible").slideUp("slow");<span style="white-space:pre"></span>});<span style="white-space:pre"></span>$(".level3").click(<span style="white-space:pre"></span>function() {<span style="white-space:pre"></span>$(this).next("div").slideToggle("slow").siblings(<span style="white-space:pre"></span>".div4:visible").slideUp("slow");<span style="white-space:pre"></span>});<span style="white-space:pre"></span>});</script>
Part css
.div3,.div4 {display: none;cursor: pointer;font-size: 13px;}.div3 li {height: 30px;line-height: 30px;list-style: none;border-bottom: #ccc 1px dotted;}.div4 li {height: 30px;line-height: 30px;list-style: none;border-bottom: #ccc 1px dotted;padding-left: 28px;}
Some html code
<Div class = "div2"> <div class = "jbsz"> </div> basic management </div> <div class = "div3"> <ul> <li class = "level3"> website configuration </li> <div class = "div4"> <ul> <li> website configuration 1 </li> <li> website configuration 2 </ li> <li> website configuration 3 </li> </ul> </div> <li class = "level3"> Management Settings </li> <div class = "div4 "> <ul> <li> website configuration 1 </li> <li> website configuration 2 </li> <li> website configuration 3 </li> </ul> </div> <li class = "level3"> navigation menu </li> <div class = "div4"> <ul> <li> website configuration 1 </li> <li> website configuration 2 </li> <li> website configuration 3 </li> </ul> </div>