Question

如果用户单击列表中的子元素，则需要向父元素和子元素添加活动类。我的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>

我正在使用下面的jquery代码向父元素和子元素添加一个活动类，但是我遇到了错误： -

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

然后在CSS中设置我的活动类。说例子

.active {background:#EFEFEF;}

只有clicked（this）子元素应该将活动类应用于它而不是整个li子元素。现在和孩子李（说lorem）一起，也应该突出显示父母li（bar）。可以把它想象成树形手风琴菜单，其中所选子元素和它的父元素都具有不同css样式的活动类。

Answer 1

我在这里假设您只想将活动类添加到列表项中，如下所示：http://jsfiddle.net/gfkM4/

我希望这就是你要找的东西。欢呼声。

Answer 2

试试这个：

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

Answer 3

已更新： http://jsfiddle.net/4G7TJ/3/（根据您的新要求，只选择了一个孩子）

$("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;
});

返回false背后的想法是防止在点击子li时将'click'事件传播到父li，因为这会撤消对孩子的样式更改。< / p>

<小时/> 更新：工作演示 - 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");
});

此外 - <li>lorem/li>未关闭，这意味着您的所有代码都可能不匹配，并且您无法确定点击时“当前”列表项（以及列表）中的内容。

Answer 4

这是使用jQuery在accordion菜单选项上应用活动类的演示。

<强> 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");
        } 
    });
});

我在http://codebins.com/bin/4ldqpa5

上完成了垃圾箱

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

4 个答案: