jQuery實(shí)現(xiàn)下拉菜單動(dòng)態(tài)添加數(shù)據(jù)點(diǎn)擊滑出收起其他功能
上面的人要hui admin 做頁面,本人前端比較菜,這框架也沒用過.
因?yàn)槭莿?dòng)態(tài)添加數(shù)據(jù) .表也沒有,..然后子菜單列表只能通過字符串拼接的方式顯示.
(偽造的)數(shù)據(jù)是傳過來了 發(fā)現(xiàn)這個(gè)框架的點(diǎn)擊菜單,子菜單滑出的效果觸發(fā)不了,應(yīng)該是封裝了吧..反正不會(huì)引用.就自己寫了個(gè)點(diǎn)擊事件(,列表格式還是參照模板).
①:請求數(shù)據(jù)+ul拼接

比較糙,兩邊icon 無力回天,不過功能是實(shí)現(xiàn)了
$.ajax({
url:'/type/reportType',
data:{"token":getCookie("token")},
type:'post',
success:function (data) {
var reportTypes=data.reportTypes;
$.each(reportTypes,function(n,value) {
var str="<dl>\n"+
"<dt id='"+value.id+"' onclick='zclick(this)'><i class=\"Hui-iconfont\"></i> "+value.rtName+
"<i class=\"Hui-iconfont menu_dropdown-arrow\"></i></dt>\n" +
" <dd >\n" +
" <ul>\n" ;
var configs=value.configs;
$.each(configs,function(n,value) {
// alert(value.rcName);
str+= " <li><a data-href=\"admin-list.html?id="+value.id+"\" data-title=\""+value.rcName
+"\" href=\"javascript:void(0)\">"+value.rcName+"</a></li>\n" ;
});
str+= " </ul>\n" +
" </dd>"+"</dl>";
$("#ss").append(str);
});
}
})
//定義判斷條件 ,true 彈出,false 收起
var b=true;
function zclick(obj){
//獲取 dt對象
var id=obj.id; //id
//獲取大節(jié)點(diǎn)dl下dt同胞對象--dd(具體下滑收起對象
var dd=$("#"+id).next();
//獲取 其他dl對象的數(shù)組
var others= dd.parent().siblings();
//遍歷每個(gè)dl下的dd
for(var i=0;i<others.length;i++){
//因?yàn)榈玫降膁d是是個(gè)數(shù)組,我這只有一個(gè)就[0]了
var ztb= others[i].getElementsByTagName("dt")[0];
// 獲取dd 不能直接用ztb.next(),只能用標(biāo)準(zhǔn)寫法
ztb=$("#"+ztb.id).next();
//獲取 dd style樣式的 display屬性(none/block)
var display=ztb.css("display");
if(display=='block'){
// alert("有打開的了!");
b=true;
break;
}
}
//彈出列表,并關(guān)閉其他兄弟列表
if(b){
dd.slideDown();
var bb=dd.parent().siblings();
for(var i=0;i<bb.length;i++){
var pdd= bb[i].getElementsByTagName("dt")[0];
var pdd=$("#"+pdd.id).next();
pdd.slideUp();
}
b=false;
}
//收起
else{
dd.slideUp();
b=true;}
}
總結(jié)
以上所述是小編給大家介紹的jQuery實(shí)現(xiàn)下拉菜單動(dòng)態(tài)添加數(shù)據(jù)點(diǎn)擊滑出收起其他功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
jQuery基礎(chǔ)知識(shí)點(diǎn)總結(jié)(必看)
下面小編就為大家?guī)硪黄猨Query基礎(chǔ)知識(shí)點(diǎn)總結(jié)(必看)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
jquery 頁面滾動(dòng)到指定DIV實(shí)現(xiàn)代碼
頁面滾動(dòng)到指定DIV的方法有很多,在本文將為大家介紹下jquery是如何實(shí)現(xiàn)的2013-09-09
Jquery之Bind方法參數(shù)傳遞與接收的三種方法
這篇文章主要介紹了Jquery的Bind方法參數(shù)傳遞與接收的三種方法,需要的朋友可以參考下2014-06-06
jQuery+jsp下拉框聯(lián)動(dòng)獲取本地?cái)?shù)據(jù)的方法(附源碼)
這篇文章主要介紹了jQuery+jsp下拉框聯(lián)動(dòng)獲取本地?cái)?shù)據(jù)的方法,以實(shí)例形式較為詳細(xì)的分析了jQuery結(jié)合jsp實(shí)現(xiàn)下拉聯(lián)動(dòng)菜單讀取本地?cái)?shù)據(jù)的相關(guān)技巧,并附帶了完整源碼供讀者下載參考,需要的朋友可以參考下2015-12-12
jQuery中each()、find()和filter()等節(jié)點(diǎn)操作方法詳解(推薦)
這篇文章主要介紹了jQuery中each()、find()和filter()等節(jié)點(diǎn)操作方法的相關(guān)資料,非常不錯(cuò)具有參考價(jià)值,需要的朋友可以參考下2016-05-05
jQuery 1.5最新版本的改進(jìn)細(xì)節(jié)分析
jQuery 1.5 beta1出來了,從學(xué)習(xí)跟進(jìn)上來說,這一次已經(jīng)比較晚了(我竟然不知道1.5什么時(shí)候出的alpha,就這么beta了)。2011-01-01
jQuery-1.9.1源碼分析系列(十)事件系統(tǒng)之事件體系結(jié)構(gòu)
這篇文章主要介紹了jQuery-1.9.1源碼分析系列(十)事件系統(tǒng)之事件體系結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下2015-11-11

