亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Community

Learn

Tools Library

AI Tools

Leisure

English

jQuery three-level drop-down

Time 2018-11-27 18:06:00

1259

Hello teacher, after I finished writing, I had a sliding glitch. What's going on?

Time

你想擁有你從未有過(guò)的東西 ,那么你必須去做你從未做過(guò)的事情。

reply all(2)

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

<!DOCTYPE html>

<html>

<head>

<title>jQuery三級(jí)下拉菜單</title>

<style>

* {

margin: 0;

padding: 0;

}

.menu {

width: 800px;

height: 30px;

background-color: #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-align: center;

float: left;

border-right: 1px solid #ffffff;

cursor: pointer;

}

.twobox li {

width: 100px;

height: 30px;

background-color: #ccc;

color: #000;

font-size: 14px;

line-height: 30px;

position: relative;

border: 0px;

}

.twobox li:hover {

color: #ffffff;

background-color: #000;

}

.three {

position: absolute;

top: 0;

left: 100px;

}

.three li {

width: 99px;

height: 30px;

line-height: 30px;

border: 0;

}

</style>

$(document).ready(function(){

//隱藏二級(jí)三級(jí)菜單

$(".twobox").hide()

$(".three").hide()

//鼠標(biāo)移動(dòng)到包含二級(jí)菜單的一級(jí)菜單時(shí)顯示

$(".one>li").mouseover(function(){

$(this).find(".twobox").slideDown(500)

})

//鼠標(biāo)移除時(shí)隱藏

$(".one>li").mouseleave(function(){

$(this).find(".twobox").slideUp(500)

});

//當(dāng)鼠標(biāo)移動(dòng)到包含三級(jí)菜單的二級(jí)菜單時(shí)顯示

$(".two").mouseover(function(){

$(this).find(".three").slideDown(500)

})

//當(dāng)鼠標(biāo)移除時(shí)隱藏

$(".two").mouseleave(function(){

$(this).find(".three").slideUp(500)

})

//.find()遍歷? ? ? .mouseover鼠標(biāo)移動(dòng)? ?.mouseleave鼠標(biāo)移除? ?.slideDown()滑動(dòng)方式? ? .slideUp()滑動(dòng)方式隱藏

//總結(jié) 在html方面出現(xiàn)卡殼浪費(fèi)了很多時(shí)間? 在jQuery方面比較穩(wěn)定

</script>

</head>

<body>

<li>Homepage</li>

<li>Konoha

<li>Sarutobi Clan</li>

<li class="two">Senju Clan

<li>Ashura Otsutsuki</li>

<li>Senju Hashirama</li>

<li>Senju Tobirama</li>

<li>Senju Rope Tree</ li>

</ul>

</li>

<li class="two">Uchiha clan

&lt ;ul class="three">

<li>Indra Otsutsuki</li>

<li>Madara Uchiha</li>

<li>Uchiha Izuna</li>

<li>Uchiha Sasuke</li>

</ul>

</li>

</ul>

</li>

<li>Iwa Ninja

<li class="two">Shadow

<li>First Generation</li>

<li>Second generation</li>

<li>Three</li>

<li>Empty</li>

</ul>

</li>

<li class="two">melt

<ul class="three"&gt ;

<li>Passenger A</li>

<li>Passenger B</li>

<li>Passenger C</ li>

<li>Passenger Ding</li>

</ul>

</li>

</ul>

</li>

<li>Sand Ninja</li>

<li>Mist Ninja< /li>

<li>Kuminin</li>

</ul>

</div>

< /body>

</html>

Like +0

Add Reply

reply //Hide when mouse is removed $(".two").mouseleave(function(){ $(this).find(".three").hide() }) Replace the last slideUp() with hide()

滅絕師太 author 2018-11-28 14:02:15

reply Hello, teacher. There is still some instability at the end of the second-level menu. The third-level display is normal.

Time author 2018-11-28 15:41:50

滅絕師太2018-11-28 09:26:06 1 floor

I need your source code

Like +0

Add Reply