单击动态嵌套列表中的更改背景列表项

Question

我有嵌套列表在运行时绘制动态来自数据库，就像这样：

<div class="list"><ul>
<li>
    listA
    <ul>
        <li>Alist1</li>
        <li>Alist2</li>
        <li>Alist3</li>
    </ul>
</li>
<li>
    listB
    <ul>
        <li>BList1</li>
        <li>BList2</li>
        <li>BList3</li>
    </ul>
</li>

我想在点击时更改列表项的后台，但它会通过以下方法更改所有嵌套列表的样式：

        var $li = $('#list li').click(function () {
        $li.removeClass('selected');
        $(this).addClass('selected');
    });

使用这种风格：

li.selected {
background-color: aqua;}

我知道我应该使用直接后代运算符（＆gt;）强制更改为父级，但我的问题是列表是动态绘制的，我无法限制其级别和嵌套列表。

是否总是只强制点击项目才会被更改？

Answer 1

1 - 如果您的列表中包含#list类而不是list的类，则您无法使用list #

2 - 您需要>使用$('.list > ul > li')

＆＃13;

＆＃13;

$(document).ready(function(){
  $('ul > li').on('click' , function(e){
    e.stopPropagation();
    //$('li > ul').hide();
    $(this).find(' > ul').slideDown();
    $(this).parent('ul').find('li').removeClass('selected');
    $(this).addClass('selected');
  });
});

＆＃13;

ul{
  background : #fff;
}
li > ul{
  display : none;
}
li.selected{
  background : red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <ul>
    <li>
        listA
        <ul>
            <li>Alist1
              <ul>
                  <li>Alist1-1</li>
                  <li>Alist1-2</li>
                  <li>Alist1-3</li>
              </ul>
            </li>
            <li>Alist2</li>
            <li>Alist3</li>
        </ul>
    </li>
    <li>
        listB
        <ul>
            <li>BList1</li>
            <li>BList2</li>
            <li>BList3</li>
        </ul>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

- 最好使用<a>查看下一个示例

＆＃13;

＆＃13;

$(document).ready(function(){
  $('a').on('click' , function(e){
    e.preventDefault();
    var GetLi = $(this).closest('li');
    var GetBigUL = $(this).closest('ul');
    var GetNextUL = $(this).next('ul');
    GetBigUL.find('a').next('ul').not(GetNextUL).slideUp();
    GetNextUL.slideDown();
    GetBigUL.find('li').removeClass('selected');
    GetLi.addClass('selected');
  });
});

＆＃13;

ul{
  background : #fff;
}
li > ul{
  display : none;
}
li.selected{
  background : red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <ul>
    <li>
        <a>listA</a>
        <ul>
            <li>
              <a>Alist1</a>
              <ul>
                  <li><a>Alist1-1</a></li>
                  <li><a>Alist1-2</a></li>
                  <li><a>Alist1-3</a></li>
              </ul>
            </li>
            <li><a>Alist2</a></li>
            <li><a>Alist3</a></li>
        </ul>
    </li>
    <li>
        <a>listB</a>
        <ul>
            <li><a>BList1</a></li>
            <li><a>BList2</a></li>
            <li><a>BList3</a></li>
        </ul>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;