**
（jQuery slidedown和slideup实现） **
<style> * { margin: 0; padding: 0; } body { margin-top: 100px; display: flex; align-items: center; justify-content: center; } .menu { width: 500px; height: 50px; line-height: 50px; align-items: center; font-size: 25px; background-color: aqua; /* position: relative; */ display: flex; align-items: center; justify-content: center; } ul { list-style: none; /* display: none; */ } ul li { background-color: #E771EF; width: 500px; height: 25px; border: 2px solid rosybrown; box-sizing: border-box; } .menu p>span { cursor: pointer; width: 50px; height: 50px; /* border: 1px solid red; */ padding: 5px; padding-left: 10px; padding-right: 10px; } .banner1, .banner2, .banner3 { border: 2px solid green; box-sizing: border-box; } /* .menu p {} */ </style> </head> <body> <div class="box"> <div class="banner1"> <div id="menu1" class="menu"> <p> 点击打开1 ; ; ; <span>☟</span> </p> </div> <ul> <li>菜单1</li> <li>菜单2</li> <li>菜单3</li> <li>菜单4</li> <li>菜单5</li> </ul> </div> <div class="banner2"> <div id="menu2" class="menu"> <p> 点击打开2 ; ; ;<span>☟</span></p> </div> <ul> <li>菜单1</li> <li>菜单2</li> <li>菜单3</li> <li>菜单4</li> <li>菜单5</li> </ul> </div> <div class="banner3"> <div id="menu3" class="menu"> <p> 点击打开3 ; ; ;<span>☟</span></p> </div> <ul> <li>菜单1</li> <li>菜单2</li> <li>菜单3</li> <li>菜单4</li> <li>菜单5</li> </ul> </div> </div> </body> <script src="jquery/jquery-1.12.4.js"></script> <script> //要用移入实现就需要用mouseleave和mouseenter实现，这样防止冒泡只在指定元素上触发 console.log($("#menu1 p>span")); $(function() { var $new1 = $('<span>☝</span>') var $new2 = $('<span>☟</span>') $('ul').stop(true).slideUp(); $("#menu1 p>span").mouseenter(function() { $("#menu1 p>span").text('☟') // $("#menu1 p>span").replaceWith($new2) $('.banner1 ul').stop(true).slideDown(); console.log(2); }) console.log($(".banner1 ul")); $(".banner1 ul").mouseleave( function() { $("#menu1 p>span").text('☝') // $("#menu1 p>span").replaceWith($new1) $('.banner1 ul').stop(true).slideUp(); console.log(1); }) $("#menu2 p>span").mouseenter(function() { $("#menu2 p>span").text('☟') // $("#menu1 p>span").replaceWith($new2) $('.banner2 ul').stop(true).slideDown(); console.log(2); }) // console.log($(".banner1 ul")); $(".banner2 ul").mouseleave( function() { $("#menu2 p>span").text('☝') // $("#menu1 p>span").replaceWith($new1) $('.banner2 ul').stop(true).slideUp(); console.log(1); }) $("#menu3 p>span").mouseenter(function() { $("#menu3 p>span").text('☟') // $("#menu1 p>span").replaceWith($new2) $('.banner3 ul').stop(true).slideDown(); console.log(2); }) console.log($(".banner3 ul")); $(".banner3 ul").mouseleave( function() { $("#menu3 p>span").text('☝') // $("#menu1 p>span").replaceWith($new1) $('.banner3 ul').stop(true).slideUp(); console.log(1); }) }) </script>