使用Jquery、HTML、CSS、JS实现下拉菜单列表
生活随笔
收集整理的這篇文章主要介紹了
使用Jquery、HTML、CSS、JS实现下拉菜单列表
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
下拉菜單列表
當(dāng)鼠標(biāo)進(jìn)入時(shí)，效果如下：
鼠標(biāo)離開(kāi)時(shí)，下拉列表進(jìn)行隱藏。效果如下：
下面展示代碼
// <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>*{padding: 0px;margin: 0px;list-style: none;}.box{margin: 100px auto;width: 340px;height: 30px;background: url(項(xiàng)目J3-11/images/bg.jpg);}.box li{width: 100px;height: 30px;background: url(項(xiàng)目J3-11/images/libg.jpg);float: left;margin-left: 10px;text-align: center;line-height: 30px;cursor: pointer;position: relative;left: 0px;}.box li ul{text-align: center;display: none;position:absolute;top: 30px;left: 0px;}</style> </head> <body><ul class="box"><li>我的淘寶<ul><li>已買(mǎi)到的寶貝</li><li>我的足跡</li><li>購(gòu)物車(chē)</li></ul></li><li>商品分類(lèi)<ul><li>日化用品</li><li>精品服飾</li><li>零食百貨</li></ul></li><li>賣(mài)家中心<ul><li>商品列表</li><li>銷(xiāo)售管理</li><li>訂單管理</li></ul></li></ul> </body> <script src="jquery-1.7.2.min.js"></script> <script>//jquery的代碼我們通常會(huì)包裹在一個(gè)$(function(){})函數(shù)中//$(function() {}) 是$(document).ready(function()的簡(jiǎn)寫(xiě)$(function(){//ready事件提供頁(yè)面加載事件，只需Dom元素加載完成后便可觸發(fā)//“$(參數(shù))”創(chuàng)建jquery實(shí)例對(duì)象，為它綁定mouseover的鼠標(biāo)事件，鼠標(biāo)進(jìn)入觸發(fā)，參數(shù)為事件的處理程序，即匿名函數(shù)//$('.box>li')層次選擇器中的子元素選擇器，獲取類(lèi)名為box下的li元素/* $('.box>li').mouseover(function(){//slideDown() 方法用于向下滑動(dòng)元素。$(this).children().slideDown(500);});$('.box>li').mouseout(function(){//slideUp() 方法用于向上滑動(dòng)元素。speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值："slow"、"fast" 或毫秒。$(this).children().slideUp(500);}); *//* slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進(jìn)行切換。如果元素向下滑動(dòng)，則 slideToggle() 可向上滑動(dòng)它們。如果元素向上滑動(dòng)，則 slideToggle() 可向下滑動(dòng)它6們。該方法檢查被選元素的可見(jiàn)狀態(tài)。如果一個(gè)元素是隱藏的，則運(yùn)行 slideDown()，如果一個(gè)元素是可見(jiàn)的，則運(yùn)行 slideUp() - 這會(huì)造成一種切換的效果。 */$('.box>li').hover(function(){//為導(dǎo)航中的每個(gè)選項(xiàng)注冊(cè)移入移出事件//children()方法代替子元素選擇器，獲取指定元素的子元素。返回被選元素的所有直接子元素/* stop()方法用于停止動(dòng)畫(huà)效果，如元素上滑下滑，可以讓動(dòng)畫(huà)隊(duì)列后面的動(dòng)畫(huà)提前執(zhí)行在不傳遞參數(shù)時(shí)，表示立即停止當(dāng)前正在執(zhí)行的動(dòng)畫(huà)，開(kāi)始執(zhí)行動(dòng)畫(huà)隊(duì)列中的下一個(gè)動(dòng)畫(huà) */$(this).children().stop().slideToggle(500);/* 1 鏈?zhǔn)骄幊?#xff1a;如果一直對(duì)同一個(gè)元素進(jìn)行函數(shù)操作，可以使用".函數(shù)名"一直寫(xiě)下去2 因?yàn)閖query對(duì)象調(diào)用方法，返回值是jquery對(duì)象本身。就用 .語(yǔ)法調(diào)用自身方法*/});}) </script> </html>總結(jié)
以上是生活随笔為你收集整理的使用Jquery、HTML、CSS、JS实现下拉菜单列表的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： element-plus分页组件默认显示
- 下一篇： LintCode 183.木材加工