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

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;}

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

是否总是强制仅更改单击的项目？

Answer 1

1-你不能使用#list，而你的列表有一个list而不是id list的类，你需要使用点而不是#

2-你需要像$('.list > ul > li')一样使用>

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

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

<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>

-- 使用<a> 会更好看下一个例子

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

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

<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>