UC知道jquery做菜单的问题
来源：百度知道 编辑：UC知道 时间：2024/05/27 05:14:37
我想把下面的菜单写活不知道该怎么写，
点击一级菜单（id:mean1）显示二级菜单（id:cd1），其余不显示
点击一级菜单（id:mean2）显示二级菜单（id:cd2），其余不显示
以此类推，菜单数量不限！用jquery写！希望高手能帮帮我，我对
js还是新手
==========================================================
<script type="text/javascript">
<!--
$(document).ready(function(){
$(".maincai li").click(function(){
$(".lefcd ul").fadeIn("fast");
})
})
//-->
</script>
<ul class="maincai ">
<li id="mean1">一级菜单1</li>
<li id="mean2">一级菜单2</li>
<li id="mean3">一级菜单3</li>
</ul>
<div class="lefcd ">
<ul id="cd1">
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
点击一级菜单（id:mean1）显示二级菜单（id:cd1），其余不显示
点击一级菜单（id:mean2）显示二级菜单（id:cd2），其余不显示
以此类推，菜单数量不限！用jquery写！希望高手能帮帮我，我对
js还是新手
==========================================================
<script type="text/javascript">
<!--
$(document).ready(function(){
$(".maincai li").click(function(){
$(".lefcd ul").fadeIn("fast");
})
})
//-->
</script>
<ul class="maincai ">
<li id="mean1">一级菜单1</li>
<li id="mean2">一级菜单2</li>
<li id="mean3">一级菜单3</li>
</ul>
<div class="lefcd ">
<ul id="cd1">
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
jquery的查找器是有第二个参数context的,你把$(".lefcd ul")改成$(".lefcd ul",$(this)),这样就在context的范围内查找了
不过要在前面加一句$(".lefcd ul").fadeOut("fast");
先隐藏所有的,再让该显示的显示出来
对,是这样的,另外,jQuery的$(document).ready(function(){});方法可以简写成$(function(){});这样多少方便了点,如果你把JavaScript写到body下面的话连$(function(){});也不用写了,因为这个时候页面部分已经载入完毕了~
另外建议你多看看jquery的api文档,写得不错,以前我没自己看api学过东西,不过看了以后真的提高很快,看来以后要多钻研,不能总找什么教程的,呵呵
你这样的id标记规则会有入侵性，不过还是很实用
var lv1id="mean",lv2id="cd"
$(".maincai li").each(function(i,n){
$(this).click(function(){
var num=this.id.substring(lv1id.length-1,this.id.length-1);//取得显示的菜单顺序
$("lefcd").hide();//隐藏所有二级
$("#"+lv2id+num).show();//显示对应的二级菜单
});
});