Bonjour professeur, après avoir fini d'écrire, j'ai eu un problème de glissement. Que se passe-t-il ?
你想拥有你从未有过的东西 ,那么你必须去做你从未做过的事情。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery三级下拉菜单</title>
<style>
* {
marge : 0 ;
remplissage : 0;
}
.menu {
largeur : 800 px ;
hauteur : 30 px;
couleur d'arrière-plan : # 000000;
marge : 0 auto ;
border-radius : 10px;
couleur : #ffffff;
border : 1px solid #ccc;
margin-top : 20px;
ul {
Style de liste: Aucun;
ul li {
largeur: 100px;
hauteur: 30px;
la taille de police: 14px;
Height-Height: 30px;
Texte- aligner: centre;
flotteur: gauche;
bordure droite: 1px solide #ffffff;
curseur: pointeur;
.twobox li {
couleur d'arrière-plan : #ccc;
couleur : #000;
taille de la police : 14 px;
hauteur de ligne : 30 px;
position : relative;
bordure : 0px;
.twobox li:hover {
couleur: #ffffff;
couleur de fond: #000;
.trois {
position: absolue;
haut: 0;
gauche: 100px ;
.trois li {
largeur : 99px;
hauteur : 30px;
hauteur de ligne : 30px;
bordure : 0;
</style>
<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
<script>
$(document).ready(function() {
//隐藏二级三级菜单
$(".twobox").hide()
$(".trois").hide()
//鼠标移动到包含二级菜单的一级菜单时显示
$(".one>li").mouseover(function(){
$(this).find(".twobox").slideDown(500)
})
//鼠标移除时隐藏
$(".one>li").mouseleave(function(){
$(this).find(".twobox").slideUp(500)
});
// $(".two").mouseover(function(){
$(this).find(".trois").slideDown(500)
//当鼠标移除时隐藏
$(".two").mouseleave(function(){
$(this).find(".trois").slideUp(500)
//.find() par défaut .mouseover par mot de passe .mouseleave par mot de passe .slideDown() par mot de passe
//总结 在html方面出现卡壳 浪费了很多时间 在jQuery方面比较稳定
</script>
</head>
<body>
<div class="menu">
<ul class="one">
<li>Page d'accueil</li>
<li>Konoha
<ul class= "twobox ">
<li>Clan Sarutobi</li>
<li class="two">Clan Senju
<ul class="trois">
< li>Asura Otsutsuki< /li>
<li>Senju Hashirama</li>
<li>Senju Tobirama</li>
<li>Arbre à corde de Senju</li>
</ul>
< ;/li>
<li class="two">Clan Uchiha
< ;li>Indra Otsutsuki</li>
<li>Madara Uchiha< ;/li>
<li>Indra Uchiha</li>
<li>Uchiha Sasuke</li>
<li>Iwa Ninja
<ul class="twobox">
<li>dust</li>
<li class="two">Shadow
<li>Première génération</li>
J'ai besoin de votre code source
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery三级下拉菜单</title>
<style>
* {
marge : 0 ;
remplissage : 0;
}
.menu {
largeur : 800 px ;
hauteur : 30 px;
couleur d'arrière-plan : # 000000;
marge : 0 auto ;
border-radius : 10px;
couleur : #ffffff;
border : 1px solid #ccc;
margin-top : 20px;
}
ul {
Style de liste: Aucun;
}
ul li {
largeur: 100px;
hauteur: 30px;
la taille de police: 14px;
Height-Height: 30px;
Texte- aligner: centre;
flotteur: gauche;
bordure droite: 1px solide #ffffff;
curseur: pointeur;
}
.twobox li {
largeur: 100px;
hauteur: 30px;
couleur d'arrière-plan : #ccc;
couleur : #000;
taille de la police : 14 px;
hauteur de ligne : 30 px;
position : relative;
bordure : 0px;
}
.twobox li:hover {
couleur: #ffffff;
couleur de fond: #000;
}
.trois {
position: absolue;
haut: 0;
gauche: 100px ;
}
.trois li {
largeur : 99px;
hauteur : 30px;
hauteur de ligne : 30px;
bordure : 0;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
<script>
$(document).ready(function() {
//隐藏二级三级菜单
$(".twobox").hide()
$(".trois").hide()
//鼠标移动到包含二级菜单的一级菜单时显示
$(".one>li").mouseover(function(){
$(this).find(".twobox").slideDown(500)
})
//鼠标移除时隐藏
$(".one>li").mouseleave(function(){
$(this).find(".twobox").slideUp(500)
});
// $(".two").mouseover(function(){
$(this).find(".trois").slideDown(500)
})
//当鼠标移除时隐藏
$(".two").mouseleave(function(){
$(this).find(".trois").slideUp(500)
})
})
//.find() par défaut .mouseover par mot de passe .mouseleave par mot de passe .slideDown() par mot de passe
//总结 在html方面出现卡壳 浪费了很多时间 在jQuery方面比较稳定
</script>
</head>
<body>
<div class="menu">
<ul class="one">
<li>Page d'accueil</li>
<li>Konoha
<ul class= "twobox ">
<li>Clan Sarutobi</li>
<li class="two">Clan Senju
<ul class="trois">
< li>Asura Otsutsuki< /li>
<li>Senju Hashirama</li>
<li>Senju Tobirama</li>
<li>Arbre à corde de Senju</li>
</ul>
< ;/li>
<li class="two">Clan Uchiha
<ul class="trois">
< ;li>Indra Otsutsuki</li>
<li>Madara Uchiha< ;/li>
<li>Indra Uchiha</li>
<li>Uchiha Sasuke</li>
<li>Iwa Ninja
<ul class="twobox">
<li>dust</li>
<li class="two">Shadow
<ul class="trois">
<li>Première génération</li>
< li>Deuxième génération</li> <li>Trois</li> <li> Vide</li> </ul> </li> <li classe ="deux">Foncer <ul class="trois"> <li> ;Passager A</li> <li>Passager B</li> <li>Passager C</li> <li>Passager D</li> < ;/ul> </li> </ul> </li>
< ;li>Sand Ninja</li> <li>Mist Ninja< /li> <li>Cloud Ninja</li> </ul></div> < ;/corps></html>J'ai besoin de votre code source