单击孩子或单击子菜单时需要激活父类

Question

我在所有页面中都有带有菜单的标题。问题是，当我单击子菜单时，无法使该子菜单及其父菜单突出显示或处于活动状态。

Artisan::call('backup:run');

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

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>

Answer 2

如果我正确理解了您的问题，下面的代码会将所需的类名添加到具有指定类名的父级。

document.addEventListener('click', ({target}) => {

  const closestDropDown = target.closest('.dropdown');

  if(closestDropDown){
    closestDropDown.classList.add('active');
    console.log(closestDropDown);
  }
});