Php 如何在单击父菜单的子菜单时使其高亮显示

我正在使用以下jquery

<script>
  $(document).ready(function () {
    $('#menu-wplook-main-menu').find('li a').click(function () {
      $('#menu-wplook-main-menu').find('li a').removeClass('active');
      $(this).addClass('active');
      $($(this)
        .closest('li.menu-item')
        .children()[0]).addClass('active');
    });
  });
</script>

$（文档）.ready（函数（）{
$（'#menu wplook main menu'）。查找（'li a'）。单击（函数（）{
$（“#menu wplook main menu”）.find（'li a'）.removeClass（'active'）；
$（this.addClass（'active'）；
$（$（本）
.closest（'li.菜单项'）
.children（）[0]）.addClass（'active'）；
});
});

我的css

<style>
  #menu-wplook-main-menu li a.active {
    color:#e53b51;
    background: blue;
  }
</style>

#菜单wplook主菜单li a.active{
颜色：#e53b51；
背景：蓝色；
}

我的html

<ul class="nav nav-tabs" role="tablist" id="menu-wplook-main-menu" >
  <li role="presentation"> 
    <a class="dropdown-toggle has-submenu cursor_pointer" href="index.php"> Home </a>                                     
  </li>
  <li role="presentation menuli menulixl root" class="menu-item">
    <a class="dropdown-toggle has-submenu cursor_pointer cursor_pointer" href=""> Services <span class="sub-arrow"></span> </a>
    <ul class="dropdown-menu multimenu multimenuxl vbghno sm-nowrap" style="min-width: 10em; max-width: 40em; top: auto; left: 0px; margin-left: -117px; width: auto; margin-top: -1px;">
      <li class="col-xs-12">
        <!--<a class="splhed" href="">Software Development</a>-->
        <a class="levelmenu" href="trav_port.php">Travel Portal Development</a>
        <a class="levelmenu" href="GDS_integ.php">GDS Integrations</a>
        <a class="levelmenu" href="xml_api_integ.php">XML/API Integrations</a>
        <a class="levelmenu" href="white_label_web.php">White Label Website</a>
        <a class="levelmenu" href="Hotel_Cab_portal.php">Hotel & Cab Portal Development</a>  
        <a class="levelmenu" href="travel_web.php">Travel Website Designing</a>   
        <a class="levelmenu" href="mobile_app_dev.php">Mobile Apps Development</a>
      </li>
    </ul>
  </li>
  <li role="presentation" class="menu-item">
    <a class="dropdown-toggle has-submenu cursor_pointer" href=""> Products <span class="sub-arrow cursor_pointer"></span> </a>
    <ul class="dropdown-menu multimenu multimenuxl vbghno sm-nowrap" style="min-width: 10em; max-width: 40em; top: auto; left: 0px; margin-left: -117px; width: auto; margin-top: -1px;">
      <li class="col-xs-12"> 
        <a class="levelmenu" href="trav_portal.php">Travel Portal</a>
        <a class="levelmenu" href="travsoft.php">Travsoft</a>
        <a class="levelmenu" href="white_label.php">White label</a>
        <a class="levelmenu" href="hotel_extranet.php">Hotel Extranet</a> 
        <a class="levelmenu" href="holiday_manage.php">Holiday Management System</a>  
        <a class="levelmenu" href="hotrl_crs.php">Hotel CRS</a> 
      </li>
    </ul>               
  </li>               
</ul>

如果我不使用href中的PHP链接，它就可以完美地工作。但是，如果我在href中使用PHP链接，它将不起作用

问题

---

我应该更改PHP文件中的任何内容吗？

它似乎工作正常。您的jQuery可以稍微清理一下。例如：

$('#menu-wplook-main-menu li a').click(function () {
    $('#menu-wplook-main-menu .active').removeClass('active');
    $(this).addClass('active');
    $(this).closest('li.menu-item').children().first().addClass('active');
});

但我认为你的主要问题是，当你点击你的链接，你导航到一个新的页面。因此，您重新加载整个菜单，并且没有剩余的状态。从零开始

您可能需要一个函数，该函数将从当前地址获取页面，查找菜单项并突出显示它

如果将所有.php链接替换为#1、#2等，则效果良好

---

因此，要么使用加载函数，要么使用ajax加载内容。

它似乎工作正常。您的jQuery可以稍微清理一下。例如：

$('#menu-wplook-main-menu li a').click(function () {
    $('#menu-wplook-main-menu .active').removeClass('active');
    $(this).addClass('active');
    $(this).closest('li.menu-item').children().first().addClass('active');
});

但我认为你的主要问题是，当你点击你的链接，你导航到一个新的页面。因此，您重新加载整个菜单，并且没有剩余的状态。从零开始

您可能需要一个函数，该函数将从当前地址获取页面，查找菜单项并突出显示它

如果将所有.php链接替换为#1、#2等，则效果良好

因此，要么使用加载函数，要么使用ajax加载内容。

试试以下方法：

$(document).ready(function(){

    $(".dropdown-menu a").on("click",function(){

        $(".dropdown-toggle").removeClass("active");

            $(this).closest(".menu-item").find(".dropdown-toggle").addClass("active");

    })
})

最终代码：

我将

href

更改为#进行测试：

.主动{
颜色：#e53b51；
背景：蓝色；
}
我的html
















$（文档）.ready（函数（）{
$（“.dropdown menu a”）。在（“单击”，函数（）上）{
$（“.dropdown toggle”）.removeClass（“活动”）；
$（this）.closest（“.menu item”）.find（“.dropdown toggle”）.addClass（“active”）；
})
})

试试这个：

$(document).ready(function(){

    $(".dropdown-menu a").on("click",function(){

        $(".dropdown-toggle").removeClass("active");

            $(this).closest(".menu-item").find(".dropdown-toggle").addClass("active");

    })
})

最终代码：

我将

href

更改为#进行测试：

.主动{
颜色：#e53b51；
背景：蓝色；
}
我的html