- communauté
- Apprendre
- Bibliothèque d'outils
- Loisirs
Maison > Questions et réponses > le corps du texte
Bonjour professeur, après avoir fini d'écrire, j'ai eu un problème de glissement. Que se passe-t-il ?
Time2018-11-28 10:58:31
<!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>Sand Ninja</li> <li>Mist Ninja< /li> <li>Cloud Ninja</li> </ul></div> < ;/corps></html>
