CODEWITHSUNDEEP
javascriptjquery
Anu upadhyay
Anu upadhyay

Reputation: 25

Need to make parent class active when child is clicked or submenu is clicked

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

Answers (2)

Rory McCrossan
Rory McCrossan

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

webpreneur
webpreneur

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

Related Questions