亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

js實現前端界面導航欄下拉列表

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

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

如果運行出現（F12查看）：

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

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

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

相關文章

  • js的三種繼承方式詳解

    js的三種繼承方式詳解

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

    工作中常用到的ES6語法

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

    JavaScript設計模式之建造者模式實例教程

    這篇文章主要介紹了JavaScript設計模式之建造者模式,結合實例形式分析了設計模式中建造者模式的概念、功能及JavaScript實現與使用建造者模式的相關操作技巧,需要的朋友可以參考下
    2018-07-07
  • JavaScript 拾漏補遺

    JavaScript 拾漏補遺

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

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

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

    CountUp.js數字滾動插件使用方法詳解

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

    js實現延遲加載的幾種方法詳解

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

    JavaScript實現簡易tab欄切換案例

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

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

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

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

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

最新評論