Javascript 使用Jquery突出显示菜单

我有一个菜单，当一个特定的菜单项被选中时，它会高亮显示。 现在，当菜单中有子项时，问题就出现了。我想选择菜单的父项和子项。 有人能帮我吗

下面是我用来突出显示菜单的html和javascript

 <ul class="sidebar-menu">
        <li class="header">MENU OPTIONS</li>

       <li><a onclick="getView(this,"menu","title");" title="First" menu="First" url="Folder/First" href="#"><i class="fa fa-book"></i><span>First Page</span></a></li>

       <li><a onclick="getView(this,"menu","title");" title="Second" menu="Second" url="Folder/Second" href="#"><i class="fa fa-bell"></i><span>Second Page</span></a></li>



      <li class="treeview active"><a href="#"><i class="fa fa-edit"></i><span>Third Page</span><i class="fa fa-angle-left pull-right"></i></a>

<ul class="treeview-menu menu-open" style="display: block;">
    <li><a onclick="getView(this,"menu","title");" title="Child 1" menu="Child 1" url="Folder/Page" href="#"><i class="fa fa-circle-o"></i>First Child</a>
    </li>
    <li><a onclick="getView(this,"menu","title");" title="Child 2" menu="Child 2" url="Folder/Page" href="#"><i class="fa fa-circle-o"></i>Second Child</a>
    </li>

    </ul></li>

        </ul>

试试这个

$('.treeview-menu > li>a').click( function() { 
                $(this).closest("ul").siblings('a').addClass('selectMenu');
            });  

---

在代码中，当您使用

parent（）

时，您指的是父级

。尝试将

parents（）

与类一起使用，以查询所有家长：

$(".sidebar-menu>li>a[menu='" + localStorage.menu + "']").parents('.treeview').addClass('selectedMenu');

---

也许这会帮助你：-）

ul，li，nav，a{margin:0；padding:0；}
a{文本装饰：无；字体系列：helvetica；}
页眉h1{文本对齐：居中；字体大小：2em；边框底部：5px实心#222；填充：.22em；字体系列：Arial，“Helvetica Neue”，Helvetica，无衬线；背景色：#f62459；颜色：#fff；}
#垂直菜单{
边缘顶部：20px；
显示：内联块；
边界半径：5px；
框大小：边框框；
左侧填充：10px；
背景：#f62459；
左边距：20px；
}
.主菜单{
显示：内联块；
宽度：100%；
框大小：边框框；
}
.主菜单李{
位置：相对位置；
高度：50px；
盒影：0-1px0 0#444，0-2px0#222；
}
.主菜单>li>a>i{
颜色：#db0a5b；
宽度：2米；
身高：100%；
线高：50px；
文本对齐：左对齐；
}
.主菜单>li:第一个孩子，.子菜单-1>li:第一个孩子，.子菜单-2>li:第一个孩子，.子菜单-3>li:第一个孩子{
盒影：无；
}
.主菜单>li:第一个子菜单>a、.子菜单-1>li:第一个子菜单>a、.子菜单-2>li:第一个子菜单>a、.子菜单-3>li:第一个子菜单>a{
边框左上半径：5px；
边框右上角半径：5px；
}
.主菜单>li:最后一个子菜单>a、.子菜单-1>li:最后一个子菜单>a、.子菜单-2>li:最后一个子菜单>a、.子菜单-3>li:最后一个子菜单>a{
边框左下半径：5px；
边框右下半径：5px；
}
.主菜单>li>a、.子菜单-1>li>a、.子菜单-2>li>a、.子菜单-3>li>a{
颜色：#d2527f；
背景：#2a2a；
线高：50px；
显示：块；
填充：0.1em；
}
.子菜单-1、.子菜单-2、.子菜单-3{
位置：绝对位置；
空白：nowrap；
顶部：-9999px；
}
.包含子菜单>a:第一个子菜单：：之后{
内容：“\f054”；
左：1米；
字体系列：'FontAwesome'；
}
/*显示子菜单*/
.主菜单>li:悬停。子菜单-1，.子菜单-1>li:悬停。子菜单-2，.子菜单-2>li:悬停。子菜单-3{
排名：0；
左：100%；
过渡：顶部.5s立方贝塞尔（0.380,0.820,790,930）；
}
.主菜单>li:悬停>a{
颜色：#22af70；
}
.子菜单-1 li：悬停>a{
颜色：#22a7f0；
}
.子菜单-2 li：悬停>a{
颜色：#f6db7f；
}
.子菜单-3 li：悬停>a{
颜色：#f2784b；
}
/*作者*/
文章{
文本对齐：左对齐；
左边距：20px；
}
第p条{
字体大小：1.2米；
颜色：#f33039；
}

创建垂直菜单栏

您可以试试这个

$('.treeview-menu > li>a').click( function() { 
   $(this).find("ul").siblings('a').addClass('selectMenu');
 });

说明：

---

点击菜单，它将找到下一个ul，它具有锚元素并添加CSS类$('.treeview-menu > li>a').click( function() { $(this).find("ul").siblings('a').addClass('selectMenu'); });