最近公司要做手机网站要做个菜单下拉功能
js尽可能的做成可移植性强的代码
于是整理了下 供大家检阅
js尽可能的做成可移植性强的代码
于是整理了下 供大家检阅
jquery代码:
$("document").ready(function(){
$(".zlp #down").click(function(){
$(".item").slideToggle();
if($("span",this).attr("tar")=="a"){
$("span",this).text("∧");
$("span",this).attr("tar","b");
}
else{
$("span",this).text("∨");
$("span",this).attr("tar","a");
}
});
$("a").click(function(){
//切换条目特效
$(this).addClass("n");
$(this).parent().siblings().children("a").removeClass("n");
if($(this).attr("tabs")){
var prdiv=$(this).parents("div").first().attr("id");
var chdiv = $(this).attr("tabs");
if($("#"+chdiv).html()){
$("#"+chdiv).siblings(".tabs").slideUp(200);
$("#"+chdiv).slideDown(800);
}else{
$("#"+prdiv).siblings(".tabs").fadeOut();
}
}
});
});
html代码:
<div class="zlp">
<ul>
<li id="down" class="n">热门区域<span tar="a">∨</span></li>
<li>参团最多<span></span></li>
<li>最新活动<span></span></li>
</ul>
</div>
<div class="item" style="display:none;"> <div class="smalljt"></div> <div class="zk"> <div class="zkqy" id="zkqy"> <ul> <li><a tabs="tabs1" href="#">芙蓉(100)</a></li> <li><a tabs="tabs2" href="#" class="n">雨花(125)</a></li> <li><a tabs="tabs3" href="#">开福(50)</a></li> <li><a tabs="tabs4" href="#">天心(86)</a></li> <li><a tabs="tabs5" href="#">岳麓(155)</a></li> <li><a tabs="tabs6" href="#">星沙(100)</a></li> <li><a tabs="tabs7" href="#">望城(80)</a></li> <li><a tabs="tabs8" href="#">宁乡(68)</a></li> </ul> </div> <div class="zksq tabs" id="tabs1" style="display:none;"> <ul> <li><a href="#">1南城省府片区</a></li> <li><a href="#" class="n">1武广新城片区</a></li> <li><a href="#">1中心片区</a></li> <li><a href="#">1尚东片区</a></li> <li><a href="#">1雨花区府片区</a></li> <li><a href="#">1红星片区</a></li> <li><a href="#">1同升湖片区</a></li> </ul> </div>
多说一句无关的 csdn的编辑器真TM难用 每次写文章都编辑了好几次</div> </div>