javascript - 单击子项或单击子菜单时需要激活父类

Question

我有包含在所有页面中的带有菜单的页眉。问题是当我单击子菜单时，我无法创建子菜单，并且它的父菜单突出显示或处于事件状态。

$(".dropdown .dropdown-menu li a").click(function() {
  $(".active").removeClass('active');
  $(this).closest('.dropdown').find('a:first').addClass("active");
  $(this).addClass("active");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="dropdown">
    <a class="dropdown-toggle" href="#" id="builders">Builders<i class="fa fa-caret-down" aria-hidden="true"></i></a>
    <ul class="dropdown-menu">
      <li><a href="gurgaon.php">Gurgaon</a></li>
      <li><a href="<?php echo base_url();?>all-india" class="active">All India</a></li>
      <li><a href="gurgaon-projects.php">Gurgaon Projects</a></li>
      <li><a href="<?php echo base_url();?>home/property_list">Property List</a></li>
    </ul>
  </li>
</ul>

Answer 1

您的 jQuery 代码可以运行，您只需要让它在加载时运行以及 click，您可以使用 trigger('click') 来实现:

var $a = $(".dropdown .dropdown-menu li a").click(function(e) {
  e.preventDefault(); // just for testing...
  $(".active").removeClass('active');
  $(this).closest('.dropdown').find('a:first').addClass("active");
  $(this).addClass("active");
});
$a.filter('.active').trigger('click');

.active {
  color: #C00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="dropdown">
    <a class="dropdown-toggle" href="#" id="builders">Builders<i class="fa fa-caret-down" aria-hidden="true"></i></a>
    <ul class="dropdown-menu">
      <li><a href="gurgaon.php">Gurgaon</a></li>
      <li><a href="<?php echo base_url();?>all-india" class="active">All India</a></li>
      <li><a href="gurgaon-projects.php">Gurgaon Projects</a></li>
      <li><a href="<?php echo base_url();?>home/property_list">Property List</a></li>
    </ul>
  </li>
  <li class="dropdown">
    <a class="dropdown-toggle" href="#" id="builders">Builders<i class="fa fa-caret-down" aria-hidden="true"></i></a>
    <ul class="dropdown-menu">
      <li><a href="gurgaon.php">Gurgaon</a></li>
      <li><a href="<?php echo base_url();?>all-india">All India</a></li>
      <li><a href="gurgaon-projects.php">Gurgaon Projects</a></li>
      <li><a href="<?php echo base_url();?>home/property_list">Property List</a></li>
    </ul>
  </li>
</ul>