本文例項為大家分享了js實現前端介面導航欄下拉列表的具體程式碼，供大家參考，具體內容如下

先來看成果圖

html程式碼：

<nav>
<ul class="nav">
<li class="dropDowm">
<a href="javascript:;" class="dropdown-toggle">
列表一
</a>
<ul class="dropdown-menu" style="display: none;height: 116px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;">
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<div class="ulbg"></div>
</ul>
</li>
<li class="dropDowm">
<a href="javascript:;" class="dropdown-toggle">
列表二
</a>
<ul class="dropdown-menu" style="display: none;height: 145px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;">
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<div class="ulbg"></div>
</ul>
</li>
<li class="dropDowm">
<a href="javascript:;" class="dropdown-toggle">
列表三
</a>
<ul class="dropdown-menu" style="display: none;height: 145px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;">
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<div class="ulbg"></div>
</ul>
</li>
<li class="dropDowm">
<a href="javascript:;" class="dropdown-toggle">
列表四
</a>
<ul class="dropdown-menu" style="display: none;height: 116px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;">
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<div class="ulbg"></div>
</ul>
</li>
<li class="dropDowm">
<a href="javascript:;" class="dropdown-toggle">
列表五
</a>
<ul class="dropdown-menu" style="display: none;height: 116px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;">
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<div class="ulbg"></div>
</ul>
</li>
<li class="dropDowm">
<a href="javascript:;" class="dropdown-toggle">
列表六
</a>
<ul class="dropdown-menu" style="display: none;height: 116px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;">
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<div class="ulbg"></div>
</ul>
</li>
<li class="dropDowm">
<a href="javascript:;" class="dropdown-toggle">
列表七
</a>
<ul class="dropdown-menu" style="display: none;height: 116px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;">
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<div class="ulbg"></div>
</ul>
</li>
</ul>
</nav>

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目錄下的 別忘了下載再引入

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。