jQuery-初識⑨
阿新 • • 發佈：2018-12-10
選單案例
加一個全域性標記——標記是展開還是收縮
程式碼
<!DOCTYPE html> <!--suppress ALL --> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul li{ list-style-type: none; } #na{ position: relative; left: 20px; } </style> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script> <!--宣告js程式碼域--> <script type="text/javascript"> //標記判斷，是隱藏還是展開 var flag = true; function testNa() { //點選國際動態的時候發生變化 //toggle實現隱藏的時候出現，出現的時候隱藏，不需要判斷 // $("#na").toggle(1500); // $("#na").slideUp(1000); // alert($("#na").css("display"));//block // $("#na").slideDown(1000); // alert($("#na").css("display")); // $("#naImg").attr("src","image/three.png"); // alert($("naImg").css("display")); if(flag){ $("#na").slideUp(1000); flag = false; }else{ $("#na").slideDown(1000); flag = true; } } </script> </head> <body > <h3>jQuery選單案例</h3> <!--<hr>--> <ul> <img src="image/one.png" alt="" id="naImg"> <label for="" onclick="testNa()"> 國際動態</label> <div id="na"> <li><img src="image/two.png" alt=""><label for="" >國內新聞</label></li> <li><img src="image/two.png" alt=""><label for="">國際新聞</label></li> </div> </ul> </body> </html>
效果：
————————————————————————————————————————————————
新增兩句讓開啟和關閉的時候最上面的圖示改變
<!DOCTYPE html> <!--suppress ALL --> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul li{ list-style-type: none; } #na{ position: relative; left: 20px; } </style> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script> <!--宣告js程式碼域--> <script type="text/javascript"> //標記判斷，是隱藏還是展開 var flag = true; function testNa() { if(flag){ $("#na").slideUp(1000); $("#naImg").attr("src","image/three.png"); flag = false; }else{ $("#na").slideDown(1000); flag = true; $("#naImg").attr("src","image/one.png"); } } </script> </head> <body > <h3>jQuery選單案例</h3> <ul> <img src="image/one.png" alt="" id="naImg"> <label for="" onclick="testNa()"> 國際動態</label> <div id="na"> <li><img src="image/two.png" alt=""><label for="" >國內新聞</label></li> <li><img src="image/two.png" alt=""><label for="">國際新聞</label></li> </div> </ul> </body> </html>
效果
————————————————————————————————————————————
換一種方法：事件不用onclick（）方法
<!DOCTYPE html> <!--suppress ALL --> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul li{ list-style-type: none; } #na{ position: relative; left: 20px; } </style> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script> <!--宣告js程式碼域--> <script type="text/javascript"> //標記判斷，是隱藏還是展開 var flag = true; //頁面載入 $(function () { //找到label標籤-“國際動態” //子選擇器 // alert($("ul>label").html()); $("ul>label").click(function(){ if(flag){ $("#na").slideUp(1000); $("#naImg").attr("src","image/three.png"); flag = false; }else{ $("#na").slideDown(1000); flag = true; $("#naImg").attr("src","image/one.png"); } }); }) //頁面載入 // $(document).ready(function () { // }) </script> </head> <body > <h3>jQuery選單案例</h3> <ul> <img src="image/one.png" alt="" id="naImg"> <label for="">國際動態</label> <div id="na"> <li><img src="image/two.png" alt=""><label for="" >國內新聞</label></li> <li><img src="image/two.png" alt=""><label for="">國際新聞</label></li> </div> </ul> </body> </html>
效果還是實現收放
$("ul>label").bind("click",function(){//替換之後效果還能實現
——————————————————————————————————————————
<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul li{
list-style-type: none;
}
#na{
position: relative;
left: 20px;
}
</style>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
<!--宣告js程式碼域-->
<script type="text/javascript">
//標記判斷，是隱藏還是展開
var flag = false;
//頁面載入
$(function () {
//flag是false,當滑鼠放上的時候執行slideDown
$("ul>label").bind("mouseover",function(){
if(flag){
$("#na").slideUp(1000);
$("#naImg").attr("src","image/three.png");
flag = true;
}else{
$("#na").slideDown(1000);
$("#naImg").attr("src","image/one.png");
flag = false;
}
});
$("ul>label").bind("mouseout",function () {
if(!flag){
$("#na").slideUp(1000);
$("#naImg").attr("src","image/three.png");
flag = true;
}else{
$("#na").slideDown(1000);
$("#naImg").attr("src","image/one.png");
flag = false;
};
});
})
//頁面載入
// $(document).ready(function () {
// })
</script>
</head>
<body >
<h3>jQuery選單案例</h3>
<ul>
<img src="image/one.png" alt="" id="naImg">
<label for="">國際動態</label>
<div id="na">
<li><img src="image/two.png" alt=""><label for="" >國內新聞</label></li>
<li><img src="image/two.png" alt=""><label for="">國際新聞</label></li>
</div>
</ul>
</body>
</html>效果：
重新整理頁面：初始狀態
滑鼠滑過；
————————————————————————————————————
<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul li{
list-style-type: none;
}
#na{
position: relative;
left: 20px;
}
</style>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
<!--宣告js程式碼域-->
<script type="text/javascript">
//標記判斷，是隱藏還是展開
var flag = false;
//頁面載入
$(function () {
//flag是false,當滑鼠放上的時候執行slideDown
$("ul>label").bind("mouseover",function(){
$("#na").slideDown(1000);
$("#naImg").attr("src","image/one.png");
//flag = true;
});
$("ul>label").bind("mouseout",function () {
$("#na").slideUp(1000);
$("#naImg").attr("src","image/three.png");
// flag = true;
});
})
</script>
</head>
<body >
<h3>jQuery選單案例</h3>
<ul>
<img src="image/one.png" alt="" id="naImg">
<label for="">國際動態</label>
<div id="na">
<li><img src="image/two.png" alt=""><label for="" >國內新聞</label></li>
<li><img src="image/two.png" alt=""><label for="">國際新聞</label></li>
</div>
</ul>
</body>
</html>