84669 人が学習中
152542 人が学習中
20005 人が学習中
5487 人が学習中
7821 人が学習中
359900 人が学習中
3350 人が学習中
180660 人が学習中
48569 人が学習中
18603 人が学習中
40936 人が学習中
1549 人が学習中
1183 人が学習中
32909 人が学習中
こんにちは、先生、書き終えた後、スライドの不具合が発生しました。何が起こっていますか?
你想拥有你从未有过的东西 ,那么你必须去做你从未做过的事情。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery三级下拉菜单</title>
<style>
* {
マージン: 0;
パディング: 0;
}
.menu {
幅: 800px;
高さ: 30px;
背景-色: # 000000;
margin: 0 auto;
border-radius: 10px;
color: #ffffff;
border: 1px Solid #ccc;
margin-top: 20px;
ul {
list-style: none;
ul li {
width: 100px;
height: 30px;
font-size: 14px;
line-height: 30px;
text-整列: 中央;
浮動小数点: 左;
境界右: 1px ソリッド #ffffff;
カーソル: ポインタ;
.twobox li {
幅: 100px;
背景色: #ccc;
カラー: #000;
フォントサイズ: 14px;
行の高さ: 30px;
位置: 相対;
境界線: 0px;
.twobox li:hover {
カラー: #ffffff;
背景色: #000;
.three {
位置: 絶対;
上: 0;
左: 100px ;
.three li {
width: 99px;
border: 0;
</style>
<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
<script>
$(document).ready(function() {
//隐藏二级三级菜单
$(".twobox").hide()
$(".three").hide()
// ネズミ标移動へ包含二级菜单的一级菜单時显示
$(".one>li").mouseover(function(){
$(this).find(".twobox").slideDown(500)
})
// ネズミ标移除時隐藏
$(".one>li").mouseleave(function(){
$(this).find(".twobox").slideUp(500)
});
//ネズミが三階層の菜を含む二階層の菜に移動すると表示
$(".two").mouseover(function(){
$(this).find(".three").slideDown(500)
//当鼠标移除時刻隐藏
$(".two").mouseleave(function(){
$(this).find(".three").slideUp(500)
//.find()遍历 .mouseoverネズミ标移移動 .mouseleaveマウス标移除 .slideDown()滑走方式 .slideUp()滑走方式隐藏
//总结在html方面出现卡壳浪费了很多時間间 在 jQuery 側比较稳定
</script>
</head>
<body>
<div class="menu">
<ul class="one">
<li>ホームページ</li>
<li>このは
<ul class= "twobox ">
<li>猿飛一族</li>
<li class="two">千手一族
<ul class="three">
< li>大筒木アスラ< /li>
<li>千手柱間</li>
<li>千手扉</li>
<li>千手縄の木</li>
</ul>
&それ;/li>
<li class="two">うちは一族
<li>大筒木インドラ</li>
<li>うちはマダラ< ;/li>
<li>うちはインドラ</li>
<li>うちはサスケ</li>
<li>岩忍者
<ul class="twobox">
<li>ダスト</li>
<li class="two">シャドウ
<li>初代</li>
ソースコードが必要です
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery三级下拉菜单</title>
<style>
* {
マージン: 0;
パディング: 0;
}
.menu {
幅: 800px;
高さ: 30px;
背景-色: # 000000;
margin: 0 auto;
border-radius: 10px;
color: #ffffff;
border: 1px Solid #ccc;
margin-top: 20px;
}
ul {
list-style: none;
}
ul li {
width: 100px;
height: 30px;
font-size: 14px;
line-height: 30px;
text-整列: 中央;
浮動小数点: 左;
境界右: 1px ソリッド #ffffff;
カーソル: ポインタ;
}
.twobox li {
幅: 100px;
高さ: 30px;
背景色: #ccc;
カラー: #000;
フォントサイズ: 14px;
行の高さ: 30px;
位置: 相対;
境界線: 0px;
}
.twobox li:hover {
カラー: #ffffff;
背景色: #000;
}
.three {
位置: 絶対;
上: 0;
左: 100px ;
}
.three li {
width: 99px;
height: 30px;
line-height: 30px;
border: 0;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
<script>
$(document).ready(function() {
//隐藏二级三级菜单
$(".twobox").hide()
$(".three").hide()
// ネズミ标移動へ包含二级菜单的一级菜单時显示
$(".one>li").mouseover(function(){
$(this).find(".twobox").slideDown(500)
})
// ネズミ标移除時隐藏
$(".one>li").mouseleave(function(){
$(this).find(".twobox").slideUp(500)
});
//ネズミが三階層の菜を含む二階層の菜に移動すると表示
$(".two").mouseover(function(){
$(this).find(".three").slideDown(500)
})
//当鼠标移除時刻隐藏
$(".two").mouseleave(function(){
$(this).find(".three").slideUp(500)
})
})
//.find()遍历 .mouseoverネズミ标移移動 .mouseleaveマウス标移除 .slideDown()滑走方式 .slideUp()滑走方式隐藏
//总结在html方面出现卡壳浪费了很多時間间 在 jQuery 側比较稳定
</script>
</head>
<body>
<div class="menu">
<ul class="one">
<li>ホームページ</li>
<li>このは
<ul class= "twobox ">
<li>猿飛一族</li>
<li class="two">千手一族
<ul class="three">
< li>大筒木アスラ< /li>
<li>千手柱間</li>
<li>千手扉</li>
<li>千手縄の木</li>
</ul>
&それ;/li>
<li class="two">うちは一族
<ul class="three">
<li>大筒木インドラ</li>
<li>うちはマダラ< ;/li>
<li>うちはインドラ</li>
<li>うちはサスケ</li>
<li>岩忍者
<ul class="twobox">
<li>ダスト</li>
<li class="two">シャドウ
<ul class="three">
<li>初代</li>
< li>第 2 世代</li> <li>3</li> <li> 空</li> </ul> </li> <li クラス="two">メルト <ul class="three"> <li>乗客A</li> <li>乗客B</li> <li>乗客C</li> <li>乗客D</li> </ul> </li> </ul> </li>ソースコードが必要です