Saya akan tunjukkan gambarajah kesan pelaksanaan dahulu Jika anda rasa ia adalah kesan yang anda inginkan, sila rujuk kod ini.
Kod pelaksanaan adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript菜单侧边展开(改良版)</title>
</head>
<body>
<ul id="navigation">
<li><a href="#">系统管理</a>
<ul>
<li><a href="#">地区设置</a></li>
<li><a href="#">分行设置</a></li>
<li><a href="#">银行操作用户设置</a></li>
<li><a href="#">密码修改</a></li>
</ul>
</li>
<li><a href="#">学校管理</a>
<ul>
<li><a href="#">学校设置</a></li>
<li><a href="#">学校查询</a></li>
</ul>
</li>
<li><a href="#">基础信息管理</a></li>
<li><a href="#">统计系统查询</a></li>
</ul>
<script src="jquery-1.11.1.js"></script>
<script>
var $j = jQuery.noConflict();
$j(function(){
var lis = document.getElementById("navigation").getElementsByTagName("li");
for (var i=0; i<lis.length; i++) {
lis[i].onmouseover=function() {
var subMenu = this.getElementsByTagName("ul")[0];
subMenu.style.display = "block";
var subcolor = this.getElementsByTagName("a")[0];
subcolor.style.background = "lightblue";
}
lis[i].onmouseout=function() {
var subMenu = this.getElementsByTagName("ul")[0];
subMenu.style.display = "none";
var subcolor = this.getElementsByTagName("a")[0];
subcolor.style.background = "";
}
}
});
</script>
<script src="jquery-1.11.1.js"></script>
</body>
</html>Di atas ialah kod bar sisi jquery yang diperkenalkan dalam artikel ini, saya harap ia akan membantu anda! Pada masa yang sama, terima kasih banyak atas sokongan anda terhadap laman web Script House!
Bagaimana untuk menggunakan fungsi panjang dalam Matlab
Perbezaan antara cellpadding dan cellpacing
Bagaimana untuk menyelesaikan masalah 400 permintaan buruk apabila halaman web dipaparkan
Apakah pemalam jquery?
Apakah saiz kertas a5
fail format DAT
tetapan pembolehubah persekitaran java
Bagaimana untuk membina pangkalan data dalam MySQL
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
