Reputation: 25
I have header with menus which is included in all pages. The problem is when I am clicking on submenu I am unable to make the submenu and it's parent menu highlighted or active.
$(".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>
Upvotes: 1
Views: 1174
Reputation: 337743
Your jQuery code works, you just need to also make it run on load as well as click
, which you can do by using 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>
Upvotes: 1
Reputation: 915
If I understood your question correctly, the following code will add the desired class name to the parent with the specified class name.
document.addEventListener('click', ({target}) => {
const closestDropDown = target.closest('.dropdown');
if(closestDropDown){
closestDropDown.classList.add('active');
console.log(closestDropDown);
}
});
Upvotes: 0