javascript菜单上的活动链接用于处理父链接而不仅仅是子链接

我正在尝试完成我的网站导航。我附加了JSFIDLE代码，以向您展示我现在拥有的代码。我的问题是，当我的子链接被设置为灰色时，它们会变为灰色，但是，当我单击该灰色时，我也想创建顶级链接。我给我的页面贴标签的方式是这样的

Page1
  Page1a
  Page1b
Page2
  Page2
.
.
.
ETC.

我需要第1页和第2页像子级别一样变灰。如果有人能帮我，我会非常感激。谢谢你抽出时间

$（'#body'）.ready（function（）{
var URL=location.pathname.split（“/”）；
URL=URL[URL.length-1]；
//

前面的问题在这里，但从未得到充分回答：

不幸的是，下面的答案都没有解决我的问题，有些答案使父链接现在高亮显示，但它使其他功能无法正常工作。当我将鼠标悬停在所有内容上时，我需要菜单仍以黄色高亮显示，我需要子菜单在不活动时仍为浅蓝色，我需要所有活动链接（父级或子级）以灰色突出显示它们是活动链接。是否有人知道解决所有这些问题的解决方案？

请看此

---

注1：新的

我在你的小提琴上没有看到任何灰色突出显示，是灰色背景吗？灰色文本？奇怪，不知道为什么它不在那里工作。如果你去我的网站，找到一个有子链接的菜单，你就会明白我的意思。我会尝试修复小提琴。我想这就是OP所寻找的，最好能解释一下它们的错误接近。我需要的是活动的当前页面链接具有#ccc与#506ab3的背景。我想我不理解最终结果，是这样的[链接]？（）没错。当你点击board of education链接时应该是这样的。当你转到education phil时，应该是灰色的，并且education board的颜色应该恢复到原来的颜色。再看看我的答案，我添加了一个新JSFIDLE的注释，你可以尝试新版本。

<script type="text/javascript">
    $('#body').ready(function(){
            var URL = location.pathname.split("/");

            URL = URL[URL.length-1];
            //<![CDATA[
            for(var i = 0; i < 11; i++){ // 4 = number of items, if you add more increase it, make number 1 larger than total items.
                if ((URL.indexOf(i) != -1) && (!$('#i'+i).is(':visible'))) {
                    $('#nav ul:visible').slideUp('normal');
                    $('#i'+i).slideDown(0);
                    $('#i'+i)
                        .find('li')
                        .each( function() {
                            var current = $(this).find('a')[0];
                            if (current.href == window.location.href)
                                current.style.backgroundColor = "#ccc";

                            current.style.color = "#006";
                        });
                }
            }
        });
</script>

$('#nav li a').click(
   (...)

   // Here I removed the "active" class from all siblings "li"
   $(this).parent().siblings().removeClass("active");

   (...)

   // Here I add the "active" class to this "li"
   $(this).parent().addClass("active");

   (...)
)