jQuery の 3 レベルのドロップダウン-PHP中国語ネットワークQ&A

コミュニティ学ぶツールライブラリレジャー

日本語

jQuery の 3 レベルのドロップダウン

Time 2018-11-27 18:06:00

0

4

1170

こんにちは、先生、書き終えた後、スライドの不具合が発生しました。何が起こっていますか?

Time

你想拥有你从未有过的东西 ,那么你必须去做你从未做过的事情。

全員に返信(2)

Time2018-11-28 10:58:31 2棟

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

&lt ;li>砂の忍者</li>

<li>霧の忍者< /li>

<li>クラウド忍者</li>

</ul>

</div>

< ;/body>

</html>

いいねを押す +0

返信を追加

返事 //マウスを離したときに非表示にする $(".two").mouseleave(function(){ $(this).find(".three").hide() }) 最後の slideUp() を Hide() に置き換えます。

灭绝师太著者 2018-11-28 14:02:15

返事こんにちは、先生。第 2 レベルのメニューの最後にまだ不安定なところがあります。第 3 レベルの表示は正常です。

Time 著者 2018-11-28 15:41:50

灭绝师太2018-11-28 09:26:06 1棟

ソースコードが必要です

いいねを押す +0

返信を追加

人気のトピック

詳細>

人気の記事

人気のチュートリアル

詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

最新のダウンロード

詳細>

ウェブエフェクト

公式サイト

サイト素材

フロントエンドテンプレート