jquery實(shí)現(xiàn)簡(jiǎn)單下拉菜單效果
更新時(shí)間：2022年04月14日 09:38:15 作者：coder_wb
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)簡(jiǎn)單下拉菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文用簡(jiǎn)單的幾行jquery代碼實(shí)現(xiàn)簡(jiǎn)單的下拉菜單效果，供大家參考，具體內(nèi)容如下
看效果
html
<ul> ? ? <li> ? ? ? 主題市場(chǎng) ? ? ? <ul> ? ? ? ? <li> ? ? ? ? ? 運(yùn)動(dòng)派 ? ? ? ? ? <ul> ? ? ? ? ? ? <li>三級(jí)菜單a</li> ? ? ? ? ? ? <li>三級(jí)菜單b</li> ? ? ? ? ? ? <li>三級(jí)菜單c</li> ? ? ? ? ? ? <li>三級(jí)菜單d</li> ? ? ? ? ? </ul> ? ? ? ? </li> ? ? ? ? <li> ? ? ? ? ? 有車族 ? ? ? ? ? <ul> ? ? ? ? ? ? <li> ? ? ? ? ? ? ? 三級(jí) ? ? ? ? ? ? ? <ul> ? ? ? ? ? ? ? ? <li>四級(jí)</li> ? ? ? ? ? ? ? ? <li>四級(jí)</li> ? ? ? ? ? ? ? ? <li>四級(jí)</li> ? ? ? ? ? ? ? </ul> ? ? ? ? ? ? </li> ? ? ? ? ? ? <li>三級(jí)</li> ? ? ? ? ? ? <li>三級(jí)</li> ? ? ? ? ? ? <li>三級(jí)</li> ? ? ? ? ? </ul> ? ? ? ? </li> ? ? ? ? <li>生活家</li> ? ? ? </ul> ? ? </li> ? ? <li> ? ? ? 特色購(gòu)物 ? ? ? <ul> ? ? ? ? <li>淘寶二手</li> ? ? ? ? <li>拍賣會(huì)</li> ? ? ? ? <li>愛逛街</li> ? ? ? ? <li>全球購(gòu)</li> ? ? ? ? <li>淘女郎</li> ? ? ? </ul> ? ? </li> ? ? <li> ? ? ? 優(yōu)惠促銷 ? ? ? <ul> ? ? ? ? <li>天天特價(jià)</li> ? ? ? ? <li>免費(fèi)試用</li> ? ? ? ? <li>清倉(cāng)</li> ? ? ? ? <li>1元起拍</li> ? ? ? </ul> ? ? </li> ? ? <li>工具</li> </ul>
簡(jiǎn)單設(shè)置一下css
<style type="text/css">
? ul li {
? ? list-style: none;
? }
? li ul {
? ? display: none;
? }
? .plus {
? ? list-style-image: url(img/plus.gif);
? }
? .minus {
? ? list-style-image: url(img/minus.gif);
? }
</style>js代碼
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
? <script type="text/javascript">
? ? $(function () {
? ? ? //給有ul的li加下圖標(biāo)（添加類名）
? ? ? $("li:has(ul)")
? ? ? ? .addClass("plus")
? ? ? ? //添加點(diǎn)擊事件
? ? ? ? .click(function (e) {
? ? ? ? ? //看看直接點(diǎn)的那個(gè)li（事件源）有沒有子元素
? ? ? ? ? if ($(e.target).children().length) {
? ? ? ? ? ? $(this).children().slideToggle();
? ? ? ? ? ? $(this).toggleClass("minus");
? ? ? ? ? }
? ? ? ? ? e.stopPropagation(); //阻止事件冒泡，目的只讓當(dāng)前這一層產(chǎn)生動(dòng)畫
? ? ? ? });
? ? });
</script>簡(jiǎn)單的下拉菜單就實(shí)現(xiàn)了。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 用jquery實(shí)現(xiàn)下拉菜單效果的代碼
- 用jquery實(shí)現(xiàn)的一個(gè)超級(jí)簡(jiǎn)單的下拉菜單
- Jquery帶搜索框的下拉菜單
- jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)顯示二級(jí)下拉菜單效果
- jQuery點(diǎn)擊彈出下拉菜單的小例子
- JQuery設(shè)置獲取下拉菜單某個(gè)選項(xiàng)的值(比較全)
- jquery仿京東導(dǎo)航/仿淘寶商城左側(cè)分類導(dǎo)航下拉菜單效果
- jQuery ul標(biāo)簽下拉菜單演示代碼
- 來(lái)自國(guó)外的30個(gè)基于jquery的Web下拉菜單
- jQuery實(shí)現(xiàn)的導(dǎo)航下拉菜單效果示例
相關(guān)文章
本篇文章主要是對(duì)jqGrid隨窗口大小變化自適應(yīng)大小的示例代碼進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
這篇文章主要介紹了jQuery操作事件,結(jié)合完整實(shí)例形式分析了jquery事件綁定、解綁、響應(yīng)、觸發(fā)等相關(guān)操作技巧,需要的朋友可以參考下2020-01-01
淺談原生JS實(shí)現(xiàn)jQuery的animate()動(dòng)畫示例
本篇文章主要介紹了淺談原生JS實(shí)現(xiàn)jQuery的animate()動(dòng)畫示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
這篇文章主要介紹了15個(gè)常用的jquery代碼片段，對(duì)大家學(xué)習(xí)jquery程序設(shè)計(jì)有所幫助,需要的朋友可以參考下2015-12-12
這篇文章主要為大家介紹了jQuery中DOM 屬性使用實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
jQuery實(shí)現(xiàn)嵌套選項(xiàng)卡功能
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)嵌套選項(xiàng)卡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
文檔離瀏覽器頂部的距離如何判斷，下面有個(gè)不錯(cuò)的方法，感興趣的朋友可以參考下2014-01-01
jQuery插件之Tocify動(dòng)態(tài)節(jié)點(diǎn)目錄菜單生成器附源碼下載
Tocify是一個(gè)能夠動(dòng)態(tài)生成文章節(jié)點(diǎn)目錄的jQuery插件，通過(guò)本文給大家分享jQuery插件之Tocify動(dòng)態(tài)節(jié)點(diǎn)目錄菜單生成器，對(duì)tocify菜單生成器相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01
JQuery中DOM節(jié)點(diǎn)的操作與訪問方法實(shí)例分析
這篇文章主要介紹了JQuery中DOM節(jié)點(diǎn)的操作與訪問方法,結(jié)合實(shí)例形式分析了jquery操作dom節(jié)點(diǎn)與訪問dom節(jié)點(diǎn)相關(guān)實(shí)現(xiàn)技巧及操作注意事項(xiàng),需要的朋友可以參考下2019-12-12
這篇文章主要介紹了jQuery中:nth-child選擇器用法,實(shí)例分析了:nth-child選擇器功能、定義及匹配子元素或奇偶元素的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12