实例分享jquery实现多级菜单效果
本文主要为大家详细介绍了基于jquery实现多级菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
font-size:14px;
}
ul,li{
list-style:none;
}
.box{
margin:10px;
padding:10px;
width:300px;
border:1px dashed #008000;
/*渐进增强:首先设置一个纯色的背景，对于不兼容css3的浏览器来说会使用纯色，对于兼容的浏览器，我们在下面在额外的增加一些渐变色，这样会覆盖掉上面*/
background:#ffe470;
background:-webkit-linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470);
background:-moz-linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470);
background:-o-linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470);
background:linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470);
}
.box li{
position:relative;
line-height:30px;
}
.box em{
position:absolute;
top:7px;
left:0;
width:16px;
height:16px;
background:url("img/icon.png") no-repeat -59px -28px;
cursor:pointer;
}
.box span{
display:block;
padding-left:20px;
}
.box em.open{
background-position:-42px -28px;
}
.box .two{
margin-left:20px;
}
.box .three{
margin-left:40px;
}
.box .four{
margin-left:60px;
}
.box .two,.box .three,.box .four{
display:none;
}
</style>
</head>
<body>
<p class='box' id='box'>
<ul>
<li>
<em></em>
<span>第一级第一个</span>
<ul class='two'>
<li><span>第二级第一个</span></li>
<li>
<em></em><span>第二级第二个</span>
<ul class='three'>
<li><span>第三极第一个</span></li>
<li><span>第三极第二个</span></li>
<li>
<em></em><span>第三极第三个</span>
<ul class='four'>
<li><span>第四级第一个</span></li>
<li><span>第四级第二个</span></li>
<li><span>第四级第三个</span></li>
</ul>
</li>
</ul>
</li>
<li>
<em></em><span>第二级第三个</span>
<ul class='three'>
<li><span>第三级第一个</span></li>
<li><span>第三级第二个</span></li>
<li><span>第三级第三个</span></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<em></em>
<span>第一级第一个</span>
<ul class='two'>
<li><span>第二级第一个</span></li>
<li>
<em></em><span>第二级第二个</span>
<ul class='three'>
<li><span>第三极第一个</span></li>
<li><span>第三极第二个</span></li>
<li>
<em></em><span>第三极第三个</span>
<ul class='four'>
<li><span>第四级第一个</span></li>
<li><span>第四级第二个</span></li>
<li><span>第四级第三个</span></li>
</ul>
</li>
</ul>
</li>
<li>
<em></em><span>第二级第三个</span>
<ul class='three'>
<li><span>第三级第一个</span></li>
<li><span>第三级第二个</span></li>
<li><span>第三级第三个</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</p>
<script>
var $box = $('#box');
$box.find("span").each(function(index,item){
var $pre = $(this).prev();
if($pre[0] && $pre[0].tagName.toLowerCase()==="em"){
$(this).css("cursor","pointer");
}
})
//jQuery里面除了bind、unbind、on、off、click这些绑定事件的方式外，还提供了一种delegate(1.7版本以前用的是live)
function fn(){
var $par = $(this).parent();
var $ul = $($par.children('ul')[0]);
var $em = $($par.children('em')[0]);
if($ul.length>0){
$ul.toggle();
$em.toggleClass("open");
var isBlock = $ul.css('display')==="block"?true:false;
//如果当前的是收缩的话，我们需要把子子孙孙中所有的ul/em都隐藏和移除open样式
if(isBlock){
$par.find('ul').css("display","none");
$par.find("em").removeClass("open");
}
}
}
$box.delegate('em',"click",fn)//给$box绑定点击事件，如果当前的事件源是em的话，我们执行fn
$box.delegate('span',"click",fn)//给$box绑定点击事件，如果当前的事件源是em的话，我们执行fn
</script>
</body>
</html>相关推荐：
Atas ialah kandungan terperinci 实例分享jquery实现多级菜单效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1382
52
Bagaimana untuk melaksanakan log masuk WeChat dwi pada telefon mudah alih Huawei?
Mar 24, 2024 am 11:27 AM
Bagaimana untuk melaksanakan log masuk WeChat dwi pada telefon mudah alih Huawei? Dengan kebangkitan media sosial, WeChat telah menjadi salah satu alat komunikasi yang sangat diperlukan dalam kehidupan seharian orang ramai. Walau bagaimanapun, ramai orang mungkin menghadapi masalah: log masuk ke beberapa akaun WeChat pada masa yang sama pada telefon mudah alih yang sama. Bagi pengguna telefon mudah alih Huawei, tidak sukar untuk mencapai log masuk WeChat dwi Artikel ini akan memperkenalkan cara mencapai log masuk WeChat dwi pada telefon mudah alih Huawei. Pertama sekali, sistem EMUI yang disertakan dengan telefon mudah alih Huawei menyediakan fungsi yang sangat mudah - pembukaan dua aplikasi. Melalui fungsi pembukaan dwi aplikasi, pengguna boleh serentak
Panduan Pengaturcaraan PHP: Kaedah untuk Melaksanakan Jujukan Fibonacci
Mar 20, 2024 pm 04:54 PM
Bahasa pengaturcaraan PHP ialah alat yang berkuasa untuk pembangunan web, yang mampu menyokong pelbagai logik dan algoritma pengaturcaraan yang berbeza. Antaranya, melaksanakan jujukan Fibonacci adalah masalah pengaturcaraan biasa dan klasik. Dalam artikel ini, kami akan memperkenalkan cara menggunakan bahasa pengaturcaraan PHP untuk melaksanakan jujukan Fibonacci, dan melampirkan contoh kod tertentu. Jujukan Fibonacci ialah jujukan matematik yang ditakrifkan seperti berikut: unsur pertama dan kedua bagi jujukan ialah 1, dan bermula dari unsur ketiga, nilai setiap unsur adalah sama dengan jumlah dua unsur sebelumnya. Beberapa elemen pertama urutan
Bagaimana untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei
Mar 24, 2024 pm 06:03 PM
Bagaimana untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Dengan populariti perisian sosial dan penekanan yang semakin meningkat terhadap privasi dan keselamatan orang ramai, fungsi klon WeChat telah beransur-ansur menjadi tumpuan perhatian. Fungsi klon WeChat boleh membantu pengguna log masuk ke berbilang akaun WeChat pada telefon mudah alih yang sama pada masa yang sama, menjadikannya lebih mudah untuk diurus dan digunakan. Tidak sukar untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Anda hanya perlu mengikuti langkah berikut. Langkah 1: Pastikan versi sistem telefon mudah alih dan versi WeChat memenuhi keperluan Pertama, pastikan versi sistem telefon mudah alih Huawei anda telah dikemas kini kepada versi terkini, serta Apl WeChat.
Kuasai cara Golang mendayakan kemungkinan pembangunan permainan
Mar 16, 2024 pm 12:57 PM
Dalam bidang pembangunan perisian hari ini, Golang (bahasa Go), sebagai bahasa pengaturcaraan yang cekap, ringkas dan sangat bersesuaian, semakin digemari oleh pembangun. Perpustakaan standardnya yang kaya dan ciri-ciri konkurensi yang cekap menjadikannya pilihan berprofil tinggi dalam bidang pembangunan permainan. Artikel ini akan meneroka cara menggunakan Golang untuk pembangunan permainan dan menunjukkan kemungkinan besarnya melalui contoh kod tertentu. 1. Kelebihan Golang dalam pembangunan permainan Sebagai bahasa yang ditaip secara statik, Golang digunakan dalam membina sistem permainan berskala besar.
Panduan Pelaksanaan Keperluan Permainan PHP
Mar 11, 2024 am 08:45 AM
Panduan Pelaksanaan Keperluan Permainan PHP Dengan populariti dan perkembangan Internet, pasaran permainan web menjadi semakin popular. Ramai pembangun berharap untuk menggunakan bahasa PHP untuk membangunkan permainan web mereka sendiri, dan melaksanakan keperluan permainan adalah langkah utama. Artikel ini akan memperkenalkan cara menggunakan bahasa PHP untuk melaksanakan keperluan permainan biasa dan menyediakan contoh kod khusus. 1. Cipta watak permainan Dalam permainan web, watak permainan adalah elemen yang sangat penting. Kita perlu mentakrifkan atribut watak permainan, seperti nama, tahap, nilai pengalaman, dll., dan menyediakan kaedah untuk mengendalikannya
Petua jQuery: Cepat ubah suai teks semua teg pada halaman
Feb 28, 2024 pm 09:06 PM
Tajuk: Petua jQuery: Cepat ubah suai teks semua teg pada halaman Dalam pembangunan web, kita selalunya perlu mengubah suai dan mengendalikan elemen pada halaman. Apabila menggunakan jQuery, kadangkala anda perlu mengubah suai kandungan teks semua teg dalam halaman sekaligus, yang boleh menjimatkan masa dan tenaga. Berikut akan memperkenalkan cara menggunakan jQuery untuk mengubah suai teks semua teg pada halaman dengan cepat, dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan fail perpustakaan jQuery dan memastikan bahawa kod berikut dimasukkan ke dalam halaman: <
Gunakan jQuery untuk mengubah suai kandungan teks semua teg
Feb 28, 2024 pm 05:42 PM
Tajuk: Gunakan jQuery untuk mengubah suai kandungan teks semua teg jQuery ialah perpustakaan JavaScript yang popular yang digunakan secara meluas untuk mengendalikan operasi DOM. Dalam pembangunan web, kita sering menghadapi keperluan untuk mengubah suai kandungan teks tag pautan (tag) pada halaman. Artikel ini akan menerangkan cara menggunakan jQuery untuk mencapai matlamat ini dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam halaman. Tambahkan kod berikut dalam fail HTML:
Bagaimana untuk mengetahui sama ada elemen jQuery mempunyai atribut tertentu?
Feb 29, 2024 am 09:03 AM
Bagaimana untuk mengetahui sama ada elemen jQuery mempunyai atribut tertentu? Apabila menggunakan jQuery untuk mengendalikan elemen DOM, anda sering menghadapi situasi di mana anda perlu menentukan sama ada sesuatu elemen mempunyai atribut tertentu. Dalam kes ini, kita boleh melaksanakan fungsi ini dengan mudah dengan bantuan kaedah yang disediakan oleh jQuery. Berikut akan memperkenalkan dua kaedah yang biasa digunakan untuk menentukan sama ada elemen jQuery mempunyai atribut khusus, dan melampirkan contoh kod tertentu. Kaedah 1: Gunakan kaedah attr() dan operator jenis // untuk menentukan sama ada elemen mempunyai atribut tertentu
