**
鼠标移入出发菜单折叠展开
（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;
display: flex;
align-items: center;
justify-content: center;
}
ul {
list-style: 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;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
}
.banner1, .banner2, .banner3 {
border: 2px solid green;
box-sizing: border-box;
}
</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>
