单击子类或单击子菜单时，需要使父类处于活动状态

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>

Answer 2

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

document.addEventListener('click', ({target}) => {
const closestDropDown = target.closest('.dropdown');
if(closestDropDown){
closestDropDown.classList.add('active');
console.log(closestDropDown);
}
});