怎么让二级菜单的子菜单高亮的同时其对应的父级菜单也高亮。

Question

网上找的代码，但是二级菜单亮的同时对应的父级菜单就不亮了，我补充了一点，但是点击二级菜单只有第一个父级菜单高亮，与二级菜单对应的没高亮。怎么用$(this)使得点击每个子菜单，对应的父级菜单也会亮。

<div class="menu">
<ul id='menu'>

<li id=''><a class="" href="first.html">首页</a></li>

<li id='first-menu'><a class="" href="second.html">second</a>
    <ul id='second-menu'>
    <li><a href="second-son1.html" >second-son1</a></li>
    <li><a href="second-son2.html" >second-son2</a></li>    
    </ul>
</li>

<li id='first-menu'><a class="" href="third.html">third</a>
    <ul id='second-menu'>
    <li><a href="third-son1.html" >third-son1</a></li>     
    </ul>
</li>

<li id=''><a class="" href="fourth.html">fourth</a></li>

</ul>
</div>
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript">
  //设置变量urlstr为当前地址
  var urlstr = location.href; 

  //alert((urlstr + '/').indexOf($(this).attr('href')));
  //设置变量urlstatus为false
  var urlstatus=false;
  //循环遍历HTML DOM里id为menu下边所有的a标签
  $("#menu a").each(function (){
  //如果当前ur与a标签href属性相等并且当前href属性不为空 
    if ((urlstr + '/').indexOf($(this).attr('href')) > -1&&$(this).attr('href')!='') {
    //为当前a标签添加cur样式，设置urlstatus变量为true
      $(this).addClass('cur'); urlstatus = true;
    } else {
    //否则为当前a标签移除cur样式
      $(this).removeClass('cur');
    }
  });

  if($("#first-menu").has('ul') && $("#second-menu a").hasClass('cur')){ 
         $("#first-menu a").eq(0).addClass('cur'); urlstatus = true;         
  }   
//如果urlstatus为false,为html dom中id为menu 下的第一个a标签添加 cur样式
  if (!urlstatus) {$("#menu a").eq(0).addClass('cur'); }
</script>

Answer 1

研究了一晚上做出来了，我的思路是在子菜单拥有当前样式cur的基础上，再给父级菜单的a元素加上当前样式。用if判断当前的子菜单是否拥有cur样式，如果有，就给当前父级菜单a元素加上cur样式。第一次尝试的判断不明确，始终加的是第一个名为second的父级菜单，应该用$this。于是就遍历拥有二级菜单的子菜单，取得当前拥有cur样式的子菜单，把当前父栏目的同胞为a的元素，也就是父级菜单的样式添加为cur，这样一来就好了。上面的id重复了，改成class，多谢下面的兄台提醒，但是为什么谷歌浏览器没有报错？

<div class="menu">
<ul id='menu'>

<li ><a class="" href="first.html">首页</a></li>

<li class='first-menu'><a class="" href="second.html">second</a>
    <ul >
    <li><a href="second-son1.html" >second-son1</a></li>
    <li><a href="second-son2.html" >second-son2</a></li>    
    </ul>
</li>

<li class='first-menu'><a class="" href="third.html">third</a>
    <ul >
    <li><a href="third-son1.html" >third-son1</a></li>     
    </ul>
</li>

<li ><a class="" href="fourth.html">fourth</a></li>

</ul>
</div>
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript">
  //设置变量urlstr为当前地址
  var urlstr = location.href; 

  //alert((urlstr + '/').indexOf($(this).attr('href')));
  //设置变量urlstatus为false
  var urlstatus=false;
  //循环遍历HTML DOM里id为menu下边所有的a标签
  $("#menu a").each(function (){
  //如果当前ur与a标签href属性相等并且当前href属性不为空 
    if ((urlstr + '/').indexOf($(this).attr('href')) > -1&&$(this).attr('href')!='') {
    //为当前a标签添加cur样式，设置urlstatus变量为true
      $(this).addClass('cur'); urlstatus = true;
    } else {
    //否则为当前a标签移除cur样式
      $(this).removeClass('cur');
    }
  });
  //遍历所有父级菜单的a标签也就是子菜单
$(".first-menu a").each(function(){
    //判断拥有cur样式的a标签
    if($(this).hasClass('cur')){  
    //把当前拥有cur样式a标签的祖辈的同胞为a的元素，也就是父级菜单的样式添加为cur    
        $(this).parents('ul').siblings('a').eq(0).addClass('cur'); 
        //设置urlstatus变量为true 
        urlstatus = true;            
    }
})
//如果urlstatus为false,为html dom中id为menu 下的第一个a标签添加 cur样式
  if (!urlstatus) {$("#menu a").eq(0).addClass('cur'); }
</script>

扩展：若是三级菜单，使得点击三级菜单的子栏目高亮的同时父级栏目一级和二级也高亮，该如何做呢？思路是什么呢？

Answer 2

不是很懂你说的高亮是什么意思。想呈现的效果是是，鼠标放到一级菜单，然后出现下拉菜单，然后鼠标放到下拉菜单，然后又出现子菜单。鼠标停留的菜单要变色么（高亮）？ 如果是这个意思，css 也可以实现。用jQuery 就是事件绑定啊。