Question 267417 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – jQuery on click on a child element add class to a non-direct parent

I am using the code below to add a class to my menu section when I hover an item on my menu :

<script>
jQuery(document).ready(function() {
     jQuery('.has-children').hover(function(){     
           jQuery('.header-jr').addClass('br-top-only');    
       },function(){    
          jQuery('.header-jr').removeClass('br-top-only');     
       });
   });
</script>

It works great but now I need to transform this function in a function that add/remove the class only when I click (not hover) on an item. I thought the following function would work, but it did not (nothing happend and no error in consol).

<script>
jQuery(document).ready(function() {
     jQuery('.has-children').click(function(){     
           jQuery('.header-jr').addClass('br-top-only');    
       },function(){    
          jQuery('.header-jr').removeClass('br-top-only');     
       });
   });
</script>

Can someone help me with this. I must confess, I have almost 0 knowledge in jQuery/JS so if you could give me a simple solution that would help me a lot.

PS1 : .has-children is my CHILD and .header-jr is my PARENT.

PS2 : the child ".has-children" is not directly below the parent ".header-jr" in my code, I have like 5/6 div between so I think that I can’t use "parent" in jQuery.

Tags:

2

Answers


  1. 0

    You can use toggleClass like:

    jQuery(document).ready(function() {
  jQuery('.has-children').click(function() {
    jQuery('.header-jr').toggleClass('br-top-only');  
  });
});
    .br-top-only{
  background-color:red;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='header-jr'>
  <div class='otherdiv'>text</div>
  <div class='otherdiv'>text</div>
  <div class='otherdiv'>text</div>
  <div class='has-children'>text</div>
</div>

    If you have multiple header and has child:

    jQuery(document).ready(function() {
  jQuery('.has-children').click(function() {
    jQuery(this).parent('.header-jr').toggleClass('br-top-only');  
  });
});
    .br-top-only{
  background-color:red;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='header-jr'>
  <div class='otherdiv'>text</div>
  <div class='otherdiv'>text</div>
  <div class='otherdiv'>text</div>
  <div class='has-children'>text</div>
</div>
<br>
<div class='header-jr'>
  <div class='otherdiv'>text</div>
  <div class='otherdiv'>text</div>
  <div class='otherdiv'>text</div>
  <div class='has-children'>text</div>
</div>

    If you have multiple level of divs you need to use closest:

    jQuery(document).ready(function() {
  jQuery('.has-children').click(function() {
    jQuery(this).closest('.header-jr').toggleClass('br-top-only');
  });
});
    .br-top-only {
  background-color: red;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='header-jr'>
  <div>
    <div class='otherdiv'>text</div>
    <div class='otherdiv'>text</div>
    <div class='otherdiv'>text</div>
    <div class='has-children'>text</div>
  </div>
</div>
<br>
<div class='header-jr'>
  <div>
    <div class='otherdiv'>text</div>
    <div class='otherdiv'>text</div>
    <div class='otherdiv'>text</div>
    <div class='has-children'>text</div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    After the page load (i.e. by clicking a button) you need to use event delegation by using jquery , .on()

    Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

    Try with toggleClass like

    jQuery(document).ready(function() {
   jQuery('.has-children').on('click', function(event){  
       jQuery('.header-jr').toggleClass('br-top-only');    
   });});

    If you want to toggle 2 classes br-top-only and other_class then use like

    jQuery(document).ready(function() {
   jQuery('.has-children').on('click', function(event){  
       jQuery('.header-jr').toggleClass('br-top-only other_class');    
   });});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search