Question

当我点击列表项时，它只突出显示一个。如果列表项有子列表，那么总子列表也会突出显示，但只应突出显示一个列表。

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>

JQUERY

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

    $that = $(this);

    $that.parent().find('li').removeClass('active');
    $that.addClass('active');
  });

Demo

Answer 1

您可以在li

中使用<span>标记

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>

jQuery：

 $('#orgCat li span').click(function(e) {
    e.preventDefault();
    $that = $(this);    
   $('li span').removeClass('active');
    $that.addClass('active');
  });

Answer 2

如果我理解正确，你想要更像这样的东西：

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

see fiddle

Answer 3

尝试在下面的文本周围使用元素，这里我使用了span

$('#orgCat span').click(function(e) {
    e.preventDefault()
    $('.active').removeClass('active');
    $(this).addClass('active');
  });

.active {
  background: #f00;
}

<script
  src="https://code.jquery.com/jquery-2.2.3.min.js"
  integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="
  crossorigin="anonymous"></script>
<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><span>oupu</span>
      <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>

Answer 4

尝试像这样添加return false：

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

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

＆＃13;

$('#orgCat li').click(function(e) {
    e.preventDefault();
    
   $that=$(this);
    $('#orgCat .active').removeClass('active');
    $that.addClass('active');
    return false;
  });

＆＃13;

.active {
  background: #f00;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<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>

＆＃13;

jQuery突出显示单击列表项

4 个答案: