Kesan akordion adalah kesan yang kerap digunakan dalam projek Ternyata projek itu telah menggunakan easyui Memandangkan penghujung tahun, saya cuba menulis sendiri
gaya css
/* Dokumen CSS */
badan {
margin: 0 auto;
Padding: 0 auto;
saiz fon: 9pt;
Keluarga fon: Microsoft Yahei, Arial, Helvetica, Verdana, sans-serif;
}
.akordion {
padding-left: 0px;
}
.akordion li {
Atas sempadan: 1px pepejal #000;
Jenis gaya senarai: tiada;
}
.titlemenu {
lebar: 100%;
Tinggi: 30px;
Warna latar belakang: #F2F2F2;
Padding: 5px 0px;
Jajaran teks: kiri;
Kursor: penunjuk;
}
.titlemenu img {
Jawatan: relatif;
Kiri: 20px;
atas: 5px;
}
.titlemenu span {
Paparan: blok sebaris;
Jawatan: relatif;
Kiri: 40px;
}
.submenu {
Jajaran teks: kiri;
lebar: 100%;
padding-left: 0px;
}
.submenu li {
Jenis gaya senarai: tiada;
lebar: 100%;
}
.submenu li img {
Jawatan: relatif;
Kiri: 20px;
atas: 5px;
}
.submenu li a {
Jawatan: relatif;
Kiri: 40px;
atas: 5px;
hiasan teks: tiada;
}
.submenu li span {
Paparan: blok sebaris;
Tinggi: 30px;
Padding: 5px 0px;
}
.tuding {
Warna latar belakang: #4A5B79;
}
JS tersuai
(function ($) {
piano = function () {
_menu ='[{"title":"一级目录","img":"images/cog.png","submenu":[{"title":"二级目录","img":"images/monitor_window_3d.png"},{"title":"二级目录","img":"images/monitor_window_3d.png"},{"title":"二级目录","img":"images/monitor_window_3d.png"}]},{"title":"一级目录","img":"images/cog.png","submenu":[{"title":"二级目录","img":"images/monitor_window_3d.png"},{"title":"二级目录","img":"images/monitor_window_3d.png"},{"id":"4","title":"二级目录","img":"images/monitor_window_3d.png"}]}]';
return ep = {
init: function (obj) {
_menu = eval('(' + _menu + ')');
var li ="";
$.each(_menu, function (index, element) {
li += '
';
if(elemen.submenu!=null)
{
li ='';
}
li ='';
});
obj.append(li);
}
}
}
$.fn.accordion = fungsi (pilihan) {
var pia = piano baharu();
pia.init($(this));
kembalikan ini.setiap(fungsi () {
var accs = $(this).children('li');
accs.each(set semula);
accs.click(onClick);
var menu_li = $(".submenu").kanak-kanak("li");
menu_li.each(fungsi (indeks, elemen) {
$(this).mousemove(fungsi (e) {
$(this).siblings().removeClass("hover");
$(this).find("a").css("color", "#fff");
$(this).siblings().find("a").css("color", "#000");
$(this).addClass("legar");
});
});
});
}
fungsi onClick() {
$(ini).adik beradik('li').cari("ul").setiap(sembunyi);
$(this).find("ul").slideDown('normal');
pulangkan palsu;
}
function hide() {
$(this).slideUp('normal');
}
set semula fungsi() {
$(this).cari("ul").sembunyi();
}
})(jQuery);
html调用方式
Anzeigeeffekt
Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er gefällt euch allen