0

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

只有被点击的（this）子元素应该应用活动类，而不是整个 li 子元素。现在与子 li（比如 lorem）一起，父 li（bar）也应该被突出显示。把它想象成一个树形手风琴菜单，其中选定的子元素和它的父 li 都有具有不同 css 样式的活动类。

4

4 回答 4

2

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

我希望这就是你要找的。干杯。

于 2012-07-19T04:50:09.397 回答
0

试试这个：

$("ul.tabs li").click(function() {
      $("ul.tabs li, .sub li").removeClass("active"); 
      $(this).find(".sub li").andSelf().addClass("active"); 
})
于 2012-07-19T01:47:59.207 回答
0

更新： 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时将“单击”事件传播到父项li，因为这会撤消子项的样式更改。

更新：工作演示 - 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>没有关闭，这意味着您的所有标签都可能不匹配，并且当您单击时，您无法确定“当前”列表项是什么（以及在哪个列表中）。

于 2012-07-19T01:56:34.587 回答
0

这是使用 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;
}

查询：

$(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上完成了完整的 bin

于 2012-07-19T15:00:16.617 回答