How to get started with jQuery: show or hide animation (navigation bar)
Yang Hengchang 2020-11-26 16:39:42
Using tools : Pay attention to private chat to get compiled software + Source code

Function demonstration

jQuery Introductory cases : Show or hide animation ( The navigation bar )

Function demonstration

The code is as follows

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* // Set the inner margin , The outer margin is set to 0 . The default margin is inside margin */ * { padding: 0px; margin: 0px; list-style: none; margin: auto; } /* // Set the width of the primary list , background */ .lii { background-color: yellow; width: 110px; border-right: 1px solid; border-left: 1px solid; } /* // Set the border of the secondary list , wide , background */ .ul li { border: 1px solid; width: 110px; background-color: red; } </style> <!-- // load jquery file --> <script type="text/javascript" src="js/jquery-3.4.1.js"> </script> <script type="text/javascript"> // Document ready function $(function() { // Click events in the first level list $(".lii").click(function() { //slideToggle yes slideUp() and slideDown() Switch between : //children() Subelement , Click on the sub elements of the area to slide up or down to appear $(this).children().stop().slideToggle(500); }) }) </script> </head> <body> <div id="d"> <!-- Unordered list --> <ul id="li"> <!-- First level list 001 --> <li class="lii"> First level list 001 <!-- Secondary list 001 --> <ul class="ul"> <li> Secondary list 001-1</li> <li> Secondary list 001-2</li> <li> Secondary list 001-3</li> <li> Secondary list 001-4</li> <li> Secondary list 001-5</li> </ul> </li> <!-- First level list 002 --> <li class="lii"> First level list 002 <!-- Secondary list 002 --> <ul class="ul"> <li> Secondary list 002-1</li> <li> Secondary list 002-2</li> <li> Secondary list 002-3</li> <li> Secondary list 002-4</li> <li> Secondary list 002-5</li> </ul> </li> <!-- First level list 003 --> <li class="lii"> First level list 003 <!-- Secondary list 003 --> <ul class="ul"> <li> Secondary list 003-1</li> <li> Secondary list 003-2</li> <li> Secondary list 003-3</li> <li> Secondary list 003-4</li> <li> Secondary list 003-5</li> </ul> </li> </ul> </div> </body></html>

0 Basic programming , Dry only , Focus on 【 A linked cat 】 Neverlost

本文为[Yang Hengchang]所创,转载请带上原文链接,感谢