js实现前端界面导航栏下拉列表
本文实例为大家分享了js实现前端界面导航栏下拉列表的具体代码，供大家参考，具体内容如下
先来看成果图
html代码：
本文实例为大家分享了js实现前端界面导航栏下拉列表的具体代码，供大家参考，具体内容如下
先来看成果图
html代码：
css代码：
nav{
background-color:#efe5e5;
width:77%;
}
.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;
}
.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目录下的别忘了下载再引入
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。