Javascript Css单击子菜单粗体主菜单

当我点击子菜单时，我希望主菜单高亮显示背景

我的代码如下所示：

<div id="dmenubg">
    <ul id="nav" class="drop">
     <li><a href="index.php">Home</a></li>
        <li><a href="#">Services</a>
            <ul>
                <li><a href="aaa.php">AAA</a></li>
                <li><a href="#">BBB</a></li>
                <li><a href="#">CCC</a></li>
            </ul>
        </li>
    </ul>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        var str=location.href.toLowerCase();
        $(".drop li a").each(function() {
            //alert(str.indexOf(this.href.toLowerCase()));
            if (str.indexOf(this.href.toLowerCase()) > -1) {
                $("li.highlight").removeClass("highlight");
                $(this).parent().addClass("highlight");
            }
        });
        $(".drop li ul a").each(function() {
                if (str.indexOf(this.href.toLowerCase()) > -1) {
                $(".drop.li.ul.highlight").removeClass("highlight");
                $(this).parent().addClass("highlight");
            }
        });
     })
</script>


Result of my menu:

Home      **Service**
          **AAA**
          BBB
          CCC

$（文档）.ready（函数（）{
var str=location.href.toLowerCase（）；
$（“.drop li a”）。每个（函数（）{
//警报（str.indexOf（this.href.toLowerCase（））；
if（str.indexOf（this.href.toLowerCase（））>-1）{
$（“li.highlight”）.removeClass（“highlight”）；
$（this.parent（）.addClass（“highlight”）；
}
});
$（“.drop li ul a”）。每个（函数（）{
if（str.indexOf（this.href.toLowerCase（））>-1）{
$（.drop.li.ul.highlight”）.removeClass（“highlight”）；
$（this.parent（）.addClass（“highlight”）；
}
});
})
我的菜单结果：
家庭**服务**
**AAA**
BBB
CCC

---

单击AAA项目时，我想突出显示服务和AAA。

我对您的javascript进行了一些修改。基本的想法是，现在我们检查每个锚点是否匹配，然后检查是否有有效的菜单父项匹配

请注意，如果只想突出显示父级的文本，则需要执行outerNav.find（“>a”）.addClass（）

$（“.drop>li>a”）作为选择器，它只会高亮显示第一级菜单。 不是所有的锚链都在下面。放下李

---

我希望这将解决您的问题

很抱歉，我在您的代码中没有看到任何单击事件。点击在你的代码中是如何工作的？亲爱的，你能编辑我的代码吗？如果我想突出显示背景。下面是一个使用背景的例子。您是否在css中添加了必要的.highlight代码？您可以通过更改str变量并再次运行它来模拟页面更改。

$(".drop li a").each(function() {

  if (str.indexOf($(this).attr("href").toLowerCase()) > -1) {
       $("li.highlight").removeClass("highlight");
       $(this).parent().addClass("highlight");
       var outerNav = $(this).parent().parent().parent();
       if(outerNav.is("li")) {
          /* Use this code to highlight the entire ul contents */
          //outerNav.addClass("highlight");
          /* Use this code to highlight just the parent li a */
          outerNav.find(">a").addClass("highlight");
       }
  }
});