Can be used for the production of headings such as:
<style> *{margin:0; padding:0; } #zhuda {margin:50px auto; width:500px; Background-color: #1B1B1B; BORDER:2PX #1B1B1B; } #zhuda ul li {list-Style:none; } #zhuda ul Li Div {display:none; height:500px; Background-color: #0075b0; } p{margin-top:2px; width:500px; height:50px; Background-color: #f9f9f9; BORDER:2PX #ac2925; } </style> <script src="Jequery2.js"></script>"Background-color: #333333"><div id="Zhuda"> <ul id="ul"> <li> <pclass="P1"> </p> <div id="Zhuda_div1" class="Heiwa"></div> </li> <li> <pclass="P2"> </p> <div id="Zhuda_div2" class="Heiwa"></div> </li> <li> <pclass="P3"> </p> <div id="Zhuda_di3" class="Heiwa"></div> </li> </ul></div><script> $('. P1'). Click (function () {$ ("#zhuda_di3"). Slideup (); $("#zhuda_div2"). Slideup (); $("#zhuda_div1"). Slidetoggle (); }); $('. P2'). Click (function () {$ ("#zhuda_di3"). Slideup (); $("#zhuda_div1"). Slideup (); $("#zhuda_div2"). Slidetoggle (); }); $('. P3'). Click (function () {$ ("#zhuda_div1"). Slideup (); $("#zhuda_div2"). Slideup (); $("#zhuda_di3"). Slidetoggle (); });</script>
Parameter explanation:
Slideup ()//means to retract the target
Slidedown ()//indicates stretch target
Slidetoggle (); Will record the number of times you click on the first stretch target Click the second time to retrieve the target.
jquery Town Zhang Shrink animation