CODEWITHSUNDEEP
javascriptjquery
lugreen
lugreen

Reputation: 102

Removing class from li

I have searched for the answer but cant seem to quite find exactly what needs to be done here.

I have 3 li tags each with a drop down ul. I want to change the background color on the active li, Then remove it if I click on annother li or the currently active li. So far I have managed to add the class to the active li but it is only removed by clicking on annother li. I need the class to be removed if the currently active li is clicked again and closed as well.

Thanks.

    <style>
     .add_color {background:#F3A54E;color:#FFF !important;}
    </style>

    <body>
<ul class="SubMenu">
    <li>Shop By Category
               <ul>
                <li>some text</li>
                <li>some text</li>
            </ul>
        </li>
        <li>Shop By Brand
            <ul>
               <li>some text</li>
               <li>some text</li>
            </ul>
        </li>
        <li>Diet Specifics
            <ul>
              <li>some text</li>
              <li>some text</li>
           </ul>
        </li>
</ul>
    </body>

    <script>
    // sub menu click fuction for drop down menus
     $(document).ready(function () {
        $("li").click(function () {
            //Add and remove background color.
           $("ul.SubMenu li").removeClass("add_color");
           $(this).toggleClass("add_color");
            //Toggle the child but don't include them in the hide selector using .not()
            $('li > ul').not($(this).children("ul")
            .slideToggle(400)).slideUp(400);

        });
    });
    </script>

Upvotes: 0

Views: 103

Answers (6)

Raulucco
Raulucco

Reputation: 3426

I made a [plunker][1] without the animation. You have to click on the parent li to toggle the color.

  [1]: http://plnkr.co/edit/TiWxVD6o2z0YATkQtiEK?p=preview

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074098

I think this is what you're looking for, comments in the code explain what's going on:

// sub menu click fuction for drop down menus
$(document).ready(function() {
  // Start with submenus not showing
  $('li > ul').hide();
  
  // Handle clicks
  $("li").click(function() {
    var $this = $(this);
    
    // Do we have the class?
    if ($this.hasClass("add_color")) {
      // Yes, remove it and make sure our children are up
      $this.removeClass("add_color");
      $this.children("ul").slideUp(400);
    } else {
      // No, add it, make sure no other items have it,
      // make sure all other children are up, and that
      // ours are down
      $this.addClass("add_color");
      $("ul.SubMenu li").not(this).removeClass("add_color");
      $('li > ul').not($this.children("ul")
        .slideDown(400)).slideUp(400);
    }
  });
});
.add_color {
  background: #F3A54E;
  color: #FFF !important;
}
<ul class="SubMenu">
  <li>Shop By Category
    <ul>
      <li>some text</li>
      <li>some text</li>
    </ul>
  </li>
  <li>Shop By Brand
    <ul>
      <li>some text</li>
      <li>some text</li>
    </ul>
  </li>
  <li>Diet Specifics
    <ul>
      <li>some text</li>
      <li>some text</li>
    </ul>
  </li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Upvotes: 0

tech-gayan
tech-gayan

Reputation: 1413

$(document).ready(function () {
    $("li").click(function () {
        //Add and remove background color.
     $("ul.SubMenu li").each(function (index, element) {
       $(this).removeClass("add_color");
       });

       $(this).toggleClass("add_color");
        //Toggle the child but don't include them in the hide selector using .not()
        $('li > ul').not($(this).children("ul")
        .slideToggle(400)).slideUp(400);

    });
});

Hope this helps

Upvotes: 0

rst
rst

Reputation: 2714

You first remove the class

$("ul.SubMenu li").removeClass("add_color");

Then you toggle it

$(this).toggleClass("add_color");

Of course it won't work. Change that order.

Cheers R

Upvotes: 0

JLRishe
JLRishe

Reputation: 101652

The problem here is that you are re-adding the class right after you remove it. To avoid this:

 $(document).ready(function () {
    $("li").click(function () {
       var $this = $(this);
        //Add and remove background color.
       $("ul.SubMenu li").not($this).removeClass("add_color");
       $this.toggleClass("add_color");

       //Toggle the child but don't include them in the hide selector using .not()
        $('li > ul').not($(this).children("ul")
        .slideToggle(400)).slideUp(400);

    });
});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

The problem is you are removing the class from all li elements before calling toggleClass() which means that when the toggleClass() is executed the class is removed from the current element also which will result in the class getting added by toggleClass instead of removing it.

$(document).ready(function() {
  $(".SubMenu > li").click(function(e) {
    //Add and remove background color.
    $("ul.SubMenu li.add_color").not(this).removeClass("add_color");
    $(this).toggleClass("add_color");

    //Toggle the child but don't include them in the hide selector using .not()
    $('.SubMenu li > ul').not($(this).children("ul")
      .slideToggle(400)).slideUp(400);

  });
});
.add_color {
  background: #F3A54E;
  color: #FFF !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="SubMenu">
  <li>Shop By Category
    <ul>
      <li>some text</li>
      <li>some text</li>
    </ul>
  </li>
  <li>Shop By Brand
    <ul>
      <li>some text</li>
      <li>some text</li>
    </ul>
  </li>
  <li>Diet Specifics
    <ul>
      <li>some text</li>
      <li>some text</li>
    </ul>
  </li>
</ul>

Upvotes: 2

Related Questions