Home > Developer > Web Develop
How jquery implements the hiding and display of the Click Drop-down menu:
In many sites have this effect, that is, click on a parent menu will display the Dropdown submenu, and then click on the Parent menu, then the submenu will be hidden, the following is a brief introduction to how to achieve this effect. Here are just a few examples of how to use jquery to achieve this effect, regardless of the aesthetics of the effect, as shown in the code:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.51texiao.cn/" /><title>Ant Tribe</title><styletype= "Text/css"> *{margin:0px;padding:0px;font-size:14px; }ul{List-style:None; }. Main. Nav{width:100px;margin:0px Auto;Margin-top:3px; }. Main. Nav a{width:100px;Height:25px;Line-height:25px;text-align:Center;text-decoration:None;Background-color:Green;Display:Block; }. Main. Nav. navcontent{Display:None; } </style> <Scripttype= "Text/javascript"src= "Mytest/jquery/jquery-1.8.3.js"></Script> <Scripttype= "Text/javascript">$ (document). Ready (function(){ varNavs=$(". Nav"); varnavcontents=$(". Navcontent"); varNavlen=navs.length; $(". Nav a"). Click (function(){ if($( This). Siblings (). CSS ("Display")=="None"){ $( This). Siblings (). CSS ("Display","Block") } Else{ $( This). Siblings (). CSS ("Display","None") } }) }) </Script> </Head> <Body> <Div> <ulclass= "Main"> <Liclass= "NAV"> <ahref="#">Ant Tribe</a> <ulclass= "Navcontent"> <Li>Search optimization</Li> <Li>CSS Zone</Li> <Li>ASP Zone</Li> </ul> </Li> <Liclass= "NAV"> <ahref="#">Reception area</a> <ulclass= "Navcontent"> <Li>Search optimization</Li> <Li>CSS Zone</Li> <Li>ASP Zone</Li> </ul> </Li> <Liclass= "NAV"> <ahref="#">Backstage Zone</a> <ulclass= "Navcontent"> <Li>Search optimization</Li> <Li>CSS Zone</Li> <Li>ASP Zone</Li> </ul> </Li> </ul> </Div> </Body> </HTML>
The above code to achieve the click on the navigation bar main Menu Implementation level two menu hidden field display effect. The above code is not aesthetically pleasing, and there may be many improvements, and here is just a thought to achieve this effect. Because jQuery2.0 no longer supports the toggle () function, it is not used here.
The original address is: http://www.51texiao.cn/jqueryjiaocheng/2015/0504/670.html
How jquery implements the hide and show of the Click Drop-down menu
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
