向父元素和子元素添加“活动”类

Question

Need to add an active class to both parent and child element if a user clicks on the child element in a list. My html is as follows:-

<ul class="tabs">
      <li class="accordion"><a href="#tab1">Bar</a>
         <ul class="sub">
           <li>lorem/li>
           <li>ipsum</li>
           <li>Lorem Ipsum</li>
           <li>Dolor Sit Amet</li>
         </ul>
      </li> 

and I'm using the jquery code below to add an active class to both the parent and child element yet I'm having errors:-

$("ul.tabs li").click(function() {
      $("ul.tabs li").removeClass("active").find(".sub li").removeClass("active"); 
      $(this).addClass("active").find(".sub li").addClass("active"); 
});

Then styled my active class in CSS. say example

.active {background:#EFEFEF;}

only the clicked (this) child element should have the active class applied to it and not the whole li child elements. Now together with the child li (say lorem) the parent li (bar) should also be highlighted. Think of it like a tree accordion menu where both the selected child element and it's parent li have the active class with different css styling.

Answer 1

I'm just going to make an assumption here that you only want to add the active class to the list items like so: http://jsfiddle.net/gfkM4/

I hope that's what you were looking for. Cheers.

Answer 2

try this:

$("ul.tabs li").click(function() {
      $("ul.tabs li, .sub li").removeClass("active"); 
      $(this).find(".sub li").andSelf().addClass("active"); 
})

Answer 3

Updated: http://jsfiddle.net/4G7TJ/3/ (per your new requirement that only one child is selected)

$("ul.tabs li").click(function() {
    // remove .active from all li descendants
    $("ul.tabs li").not(this).removeClass("active");

    $(this)
        .addClass("active")
        .not('.accordion')
        .parents("li:first").addClass("active");
    return false;
});

The idea behind returning false is to prevent the 'click' event from being propagated to the parent li when a child li is clicked, since that would undo the styling change on the child.

---

Update : Working demo - http://jsfiddle.net/4G7TJ/1/

// only trigger the click on direct descendants
// (otherwise the kids get the event first and this won't work)
$("ul.tabs > li").click(function() {

    // remove .active from all li descendants
    $("ul.tabs li").not(this).removeClass("active");

    $(this).addClass("active").find(".sub li").addClass("active");
});

Also - <li>lorem/li> isn't closed, meaning that all of your tags are likely mismatched and you can't be sure what the 'current' list-item is (and in which list) when you click.

Answer 4

Here is demo for applying active class on accordion menu option using jQuery.

HTML:

<ul class="tabs">
  <li class="accordion">
    <a href="#tab1">
      Bar
    </a>
    <ul class="sub">
      <li>
        lorem
      </li>
      <li>
        ipsum
      </li>
      <li>
        Lorem Ipsum
      </li>
      <li>
        Dolor Sit Amet
      </li>
    </ul>
  </li>

  <li class="accordion">
    <a href="#tab2">
      Foo
    </a>
    <ul class="sub">
      <li>
        lorem
      </li>
      <li>
        ipsum
      </li>
      <li>
        Lorem Ipsum
      </li>
      <li>
        Dolor Sit Amet
      </li>
    </ul>
  </li>  
</ul>

CSS:

.tabs li{
  list-style:none;
}
.tabs li:hover{
  background:#88ccf9;
}
.tabs li a{
  color:#334499;
}
.tabs{
  border:1px solid #3344ff;
  background:#dcfcff;
  padding:10px;
}
.tabs .accordion .sub{
  padding:3px 3px 3px 18px;
  display:none;
}
.tabs .active .sub{
  display:block;
}
.tabs li.active{
  background:#77d9c9;
}

JQuery:

$(function() {
    $("ul.tabs li").click(function() {
        // remove .active from all li descendants
        $("ul.tabs li").not(this).removeClass("active");
        //hide all sub menu except current active
        $("ul.tabs li").not(this).find(".sub").hide(400);
        //apply active class on current selected menu
        $(this).addClass("active");

        //check if sub menu exists
        if($(this).find(".sub").length>0){
              //show the selected sub menu 
              $(this).find(".sub").show(500);
               //apply active class on all sub menu options
              $(this).find(".sub li").andSelf().addClass("active");
        } 
    });
});

I have done complete bin on http://codebins.com/bin/4ldqpa5