**
滑鼠移入出發選單折疊展開
（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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/155457.html
標籤：其他
上一篇：正則運算式技術