前端界面导航栏的下拉列表使用js操作显示

原标题：前端界面导航栏的下拉列表使用js操作显示

先来看成果图

html代码：

css代码：

nav {
background-color: #efe5e5;
width: 文章来源地址31985.html77%;
}
.nav{
height: 50px;
width: 100%;
display: flex;
}
.nav .dropDowm{
float: left;
width: 14%;
list-style: none;
}
.nav .dropDowm>a{
text-decoration: none;
margin: 12px;
line-height: 3;
}
.nav .dropDowm .dropdown-menu{
background-color: #848d9e;
}
.nav .dropDowm .dropdown-menu>li{
list-style: none;
display: block;
}
www.yii666.com .nav .dropDowm .dropdown-menu>li>a{
text-decoration: none;
display: block;
font-size: 16px;
line-height: 28px;
}


最重要的是js代码 利用js代码控制

$(function(){
$('.nav .dropDowm').hover(function(e) {
$(this).find('ul').stop().slideToggle();
});
});


简短介绍：
slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态。
如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。

如果运行出现（F12查看）：

解决 在头部加上jquery的js文件即可
比如，这是小编的js目录下的 别忘了下载再引入

来源于：前端界面导航栏的下拉列表使用js操作显示