Javascript jQuery高亮显示单击的列表项

当我点击列表项时，它只高亮显示一个。如果列表项具有子列表，则整个子列表也将高亮显示，但只应高亮显示一个列表

CSS

.active {
  background: #f00;
}

HTML

<ul id="orgCat">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus
    <ul>
    <li>abc</li>
    <li>sdf</li>
    <li>oupu
      <ul>
      <li>progf</li>
      <li>ghfhg</li>
      </ul>
    </li>
    </ul>
  </li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

您可以在li中使用

标记

HTML:

 <ul id="orgCat">
  <li class="list-group-item"><span class='active'>Cras justo odio</span></li>
  <li class="list-group-item"><span>Dapibus ac facilisis in</span></li>
  <li class="list-group-item"><span>Morbi leo risus</span>
    <ul>
    <li><span>abc</span></li>
    <li><span>sdf</span></li>
    <li>oupu
      <ul>
      <li><span>progf</span></li>
      <li><span>ghfhg</span></li>
      </ul>
    </li>
    </ul>
  </li>
  <li class="list-group-item"><span>Porta ac consectetur ac</span></li>
  <li class="list-group-item"><span>Vestibulum at eros</span></li>
  <li class="list-group-item"><span>Cras justo odio</span></li>
  <li class="list-group-item"><span>Dapibus ac facilisis in</span></li>
  <li class="list-group-item"><span>Morbi leo risus</span></li>
  <li class="list-group-item"><span>Porta ac consectetur ac</span></li>
  <li class="list-group-item"><span>Vestibulum at eros</span></li>
</ul>

---

如果我没弄错的话，你想要的是这样的东西：

$(function(){
  $(document).on('click', 'li', function(e) {
    var $me = $(e.originalEvent.target);
    e.preventDefault();
    $('li.active').removeClass('active');
    $me.addClass('active'); 
    $('#out').text($me.text());
  });
});

$('#orgCat li').click(function(e) {
e.preventDefault();

$that=$(this);
$('#orgCat .active').removeClass('active');
$that.addClass('active');
return false;
});

---

尝试在文本周围使用一个元素，如下所示，这里我使用了span

$（'orgCat span'）。单击（函数（e）{
e、 预防默认值（）
$（'.active'）.removeClass（'active'）；
$（this.addClass（'active'）；
});
.active{
背景：#f00；
}


Cras justo odio
Dapibus ac设施在
Morbi leo risus

abc
自卫队
欧普

程序
ghfhg




Porta ac concetetur ac
eros的前庭
Cras justo odio
Dapibus ac设施在
Morbi leo risus
Porta ac concetetur ac
eros的前庭
尝试添加
返回false
如下：

$(function(){
  $(document).on('click', 'li', function(e) {
    var $me = $(e.originalEvent.target);
    e.preventDefault();
    $('li.active').removeClass('active');
    $me.addClass('active'); 
    $('#out').text($me.text());
  });
});

$('#orgCat li').click(function(e) {
e.preventDefault();

$that=$(this);
$('#orgCat .active').removeClass('active');
$that.addClass('active');
return false;
});


$（'orgCat li'）。单击（函数（e）{
e、 预防默认值（）；
$that=$（this）；
$（'#orgCat.active'）.removeClass（'active'）；
$that.addClass（'active'）；
返回false；
});
.active{
背景：#f00；
}


Cras justo odio
Dapibus ac设施在
Morbi leo risus

abc
自卫队
欧普

程序
ghfhg




Porta ac concetetur ac
eros的前庭
Cras justo odio
Dapibus ac设施在
Morbi leo risus
Porta ac concetetur ac
eros的前庭
您的问题是什么？问题是什么？您的问题是什么？您希望实现什么？您设置了li的背景色，并且li有子对象，因此子对象当然具有相同的背景。。。。