Question 211997 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Adding class to current child when click on parent element

i have ecommerce site, trying open sub-menu when click on parent menu
In category side-bar when parent element (main category) is clicked i want add class to child element (sub-category) so that child element is display with some nice animation.
categories menu

when next main category is click previous sub-category should be hidden and current sub-category should be displayed.

<ul class="woo-main-cat">

<li class="cork"><a href="http://maincategories">Anti-Allergics</a>
    <ul class="sub-cat-menu">
      <li><a href="http://maincategoreis/sub-categories)</a></li>
    </ul>
</li>

<li class="cork"><a href="http://maincategories">Anti-Allergics</a>
    <ul class="sub-cat-menu">
      <li><a href="http://maincategoreis/sub-categories)</a></li>
      <li><a href="http://maincategoreis/sub-categories)</a></li>
    </ul>
</li>

<li class="cork"><a href="http://maincategories">Anti-Allergics</a>
    <ul class="sub-cat-menu">
      <li><a href="http://maincategoreis/sub-categories)</a></li>
      <li><a href="http://maincategoreis/sub-categories)</a></li>
    </ul>
</li>

Where class:woo-main-cat > li holds main categories and class:sub-cat-menu > li holds sub-categories. When woo-main-cat > li is click sub-cat-menu should displayed when next main categories is clicked previous sub-category should be close.

.sub-cat-menu {


background: #fff;
  visibility: hidden;
  height: 0;
  transition: 0.8s ease-in;
}

.tako-open{
  visibility: visible;
  height: 100%;
}

Trying some animation effect with css when sub-categories opens and hide

$('.woo-main-cat li').on('click', function(){
$(this).children('.sub-cat-menu').addClass('tako-open');
});

Above code perfectly open the current sub-category adding tako-open class on child element->sub-cat-menu when click on parent category but i want close this open sub-category when next parent category is click.

jQuery(function($) {
$('.woo-main-cat li').on('click', function(){
    $(this).children('.sub-cat-menu').addClass('tako-open');
},function() {
       $(this).children('.sub-cat-menu').removeClass('tako-open');
    });
});

so after adding removeClass code nothing happens it doesnt add any class to child-element (sub-category) when click on parent element (main-category)

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0 
    $('.woo-main-cat li').on('click', function(){
$( "*" ).removeClass( "tako-open" );
$(this).children('.sub-cat-menu').addClass('tako-open',1000, "easeOutBounce");
})
    • will remove all tako-open class. apperciate everyone help

  2. 0

    here you go:

            $('.woo-main-cat li').on('click', function () {
            $($('.woo-main-cat').find('ul')).removeClass('tako-open')
            $(this).children('.sub-cat-menu').addClass('tako-open');
        });
    Login or Signup to reply.
  3. 0

    You can first remove the tako-open class from all the elements before opening the current one.

    $('.woo-main-cat > li').on('click', function(){
  $('.sub-cat-menu').removeClass('tako-open');
  $(this).children('.sub-cat-menu').addClass('tako-open');
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search