欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實(shí)現(xiàn)前端界面導(dǎo)航欄下拉列表

 更新時間：2020年08月27日 10:47:05   作者：mo-2016  
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)前端界面導(dǎo)航欄下拉列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)前端界面導(dǎo)航欄下拉列表的具體代碼，供大家參考，具體內(nèi)容如下

先來看成果圖

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() 方法通過使用滑動效果（高度變化）來切換元素的可見狀態(tài)。
如果被選元素是可見的，則隱藏這些元素，如果被選元素是隱藏的，則顯示這些元素。

如果運(yùn)行出現(xiàn)（F12查看）：

解決 在頭部加上jquery的js文件即可
比如，這是小編的js目錄下的 別忘了下載再引入

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • js的三種繼承方式詳解

    js的三種繼承方式詳解

    本文主要介紹了js的三種繼承方式。具有一定的參考價(jià)值，下面跟著小編一起來看下吧
    2017-01-01
  • 工作中常用到的ES6語法

    工作中常用到的ES6語法

    ECMAScript 6是JavaScript語言的下一代標(biāo)準(zhǔn)，已經(jīng)在2015年6月正式發(fā)布了。這篇文章主要介紹了工作中常用到的ES6語法,需要的朋友可以參考下
    2018-09-09
  • JavaScript設(shè)計(jì)模式之建造者模式實(shí)例教程

    JavaScript設(shè)計(jì)模式之建造者模式實(shí)例教程

    這篇文章主要介紹了JavaScript設(shè)計(jì)模式之建造者模式,結(jié)合實(shí)例形式分析了設(shè)計(jì)模式中建造者模式的概念、功能及JavaScript實(shí)現(xiàn)與使用建造者模式的相關(guān)操作技巧,需要的朋友可以參考下
    2018-07-07
  • JavaScript 拾漏補(bǔ)遺

    JavaScript 拾漏補(bǔ)遺

    javascritp實(shí)際上由三部分組成： ECMAScript，DOM, BOM 前兩者由工業(yè)標(biāo)準(zhǔn)，BOM尚比較混亂。
    2009-12-12
  • for循環(huán) + setTimeout 結(jié)合一些示例(前端面試題）

    for循環(huán) + setTimeout 結(jié)合一些示例(前端面試題）

    最近在學(xué)習(xí)node.js開發(fā)資料，正好碰到了for循環(huán)+settimeout的經(jīng)典例子，下面小編給大家分享for循環(huán) + setTimeout 結(jié)合一些示例代碼，需要的朋友參考下吧
    2017-08-08
  • CountUp.js數(shù)字滾動插件使用方法詳解

    CountUp.js數(shù)字滾動插件使用方法詳解

    這篇文章主要為大家詳細(xì)介紹了CountUp.js數(shù)字滾動插件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2019-10-10
  • js實(shí)現(xiàn)延遲加載的幾種方法詳解

    js實(shí)現(xiàn)延遲加載的幾種方法詳解

    今天小編就為大家分享一篇關(guān)于js實(shí)現(xiàn)延遲加載的幾種方法詳解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧
    2019-01-01
  • JavaScript實(shí)現(xiàn)簡易tab欄切換案例

    JavaScript實(shí)現(xiàn)簡易tab欄切換案例

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡易tab欄切換案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2021-06-06
  • 通過判斷JavaScript的版本實(shí)現(xiàn)執(zhí)行不同的代碼

    通過判斷JavaScript的版本實(shí)現(xiàn)執(zhí)行不同的代碼

    有時候需要根據(jù)JavaScript的版本來分別執(zhí)行一些代碼,那么就可能需要用到下面的代碼.
    2010-05-05
  • 模擬windows平臺的上下文菜單效果代碼

    模擬windows平臺的上下文菜單效果代碼

    技術(shù)上沒什么難的，就是定義一個隱藏的box，當(dāng)觸發(fā)上下文事件時顯示它，當(dāng)單擊body任意處時又隱藏它。
    2011-03-03

最新評論