jquery實現(xiàn)簡單下拉菜單效果

更新時間：2022年04月14日 09:38:15 作者：coder_wb

這篇文章主要為大家詳細(xì)介紹了jquery實現(xiàn)簡單下拉菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文用簡單的幾行jquery代碼實現(xiàn)簡單的下拉菜單效果，供大家參考，具體內(nèi)容如下

看效果

html

<ul>
? ? <li>
? ? ? 主題市場
? ? ? <ul>
? ? ? ? <li>
? ? ? ? ? 運(yùn)動派
? ? ? ? ? <ul>
? ? ? ? ? ? <li>三級菜單a</li>
? ? ? ? ? ? <li>三級菜單b</li>
? ? ? ? ? ? <li>三級菜單c</li>
? ? ? ? ? ? <li>三級菜單d</li>
? ? ? ? ? </ul>
? ? ? ? </li>
? ? ? ? <li>
? ? ? ? ? 有車族
? ? ? ? ? <ul>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? 三級
? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li>四級</li>
? ? ? ? ? ? ? ? <li>四級</li>
? ? ? ? ? ? ? ? <li>四級</li>
? ? ? ? ? ? ? </ul>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li>三級</li>
? ? ? ? ? ? <li>三級</li>
? ? ? ? ? ? <li>三級</li>
? ? ? ? ? </ul>
? ? ? ? </li>
? ? ? ? <li>生活家</li>
? ? ? </ul>
? ? </li>
? ? <li>
? ? ? 特色購物
? ? ? <ul>
? ? ? ? <li>淘寶二手</li>
? ? ? ? <li>拍賣會</li>
? ? ? ? <li>愛逛街</li>
? ? ? ? <li>全球購</li>
? ? ? ? <li>淘女郎</li>
? ? ? </ul>
? ? </li>
? ? <li>
? ? ? 優(yōu)惠促銷
? ? ? <ul>
? ? ? ? <li>天天特價</li>
? ? ? ? <li>免費(fèi)試用</li>
? ? ? ? <li>清倉</li>
? ? ? ? <li>1元起拍</li>
? ? ? </ul>
? ? </li>
? ? <li>工具</li>
</ul>

簡單設(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)的那個li（事件源）有沒有子元素
? ? ? ? ? if ($(e.target).children().length) {
? ? ? ? ? ? $(this).children().slideToggle();
? ? ? ? ? ? $(this).toggleClass("minus");
? ? ? ? ? }
? ? ? ? ? e.stopPropagation(); //阻止事件冒泡，目的只讓當(dāng)前這一層產(chǎn)生動畫
? ? ? ? });
? ? });
</script>

簡單的下拉菜單就實現(xiàn)了。

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

您可能感興趣的文章: