suchen

Heim  >  Artikel  >  Web-Frontend  >  Implementierung der jQuery-Seitenleiste code_jquery

Implementierung der jQuery-Seitenleiste code_jquery

WBOY
WBOYOriginal
2016-05-16 15:02:001374Durchsuche

Ich zeige Ihnen zuerst das Implementierungseffektdiagramm. Wenn Sie der Meinung sind, dass es sich um den gewünschten Effekt handelt, lesen Sie bitte diesen Code.

Implementierung der jQuery-Seitenleiste code_jquery

Der Implementierungscode lautet wie folgt: 

<!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>

Das Obige ist der in diesem Artikel vorgestellte JQuery-Sidebar-Code. Ich hoffe, er wird Ihnen hilfreich sein! Gleichzeitig vielen Dank für Ihre Unterstützung der Script House-Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispiel für eine reaktionsfähige BootStrap-Navigationsleiste: Einführung_Javascript-KenntnisseNächster Artikel：Beispiel für eine reaktionsfähige BootStrap-Navigationsleiste: Einführung_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen