Hello teacher, after I finished writing, my phone became stuck while sliding. What’s going on?

jQuery three-level drop-down-PHP Chinese Network Q&A

Community Learn Tools Library Leisure

English

jQuery three-level drop-down

Time 2018-11-27 18:06:00

1159

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

Time

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

reply all(2)

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

<!DOCTYPE html>

<html>

<head>

<title>jQuery三级下拉菜单</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(){

//隐藏二级三级菜单

$(".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>

<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