javascript - 在 Bootstrap 中更改事件列表项的背景颜色

Question

我有元素组列表

<div id="MainMenu">
    <div class="list-group panel">
        <a href="#why" class="list-group-item" data-toggle="collapse" data-parent="#MainMenu">Menu 1</a>
        <div class="collapse" id="why">
            <a href="" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Menu 1 a</a>
            <a href="" class="list-group-item">Menu 1 b</a>
            <a href="" class="list-group-item">Menu 1 c</a>
            <a href="" class="list-group-item">Menu 1 d</a>
            <a href="" class="list-group-item">Menu 1 e</a>
            <a href="" class="list-group-item">Menu 1 f</a>
        </div>
        <a href="#joinus" class="list-group-item" data-toggle="collapse" data-parent="#MainMenu">Menu 2</a>
        <div class="collapse" id="joinus">
            <a href="" class="list-group-item">Menu 2 a</a>
            <a href="" class="list-group-item">Menu 2 b</a>
            <a href="" class="list-group-item">Menu 2 c</a>
            <a href="" class="list-group-item">Menu 2 d</a>
            <a href="" class="list-group-item">Menu 2 e</a>
        </div>
    </div>
</div>

我想更改事件列表项的背景，我知道如何更改背景，但我无法通过 JavaScript 获取哪个列表是事件的或非事件的，尝试了很多其他人提供的解决方案，但没有成功。

JsFiddle

更新:

Answer 1

不知道为什么 bootstrap 不这样做，但这里有一些 jQuery on fiddle为你。警报显示事件的 href。

这就是你想要的吗？

---

更新 - 2022 年 9 月 1 日

编辑旧的 fiddle ，这是新的 http://jsfiddle.net/dh7t3cbp/1/

$('.list-group').on('click', '> a', function(e) {
  var $this = $(this);
  $('.list-group').find('.active').removeClass('active');
  $this.addClass('active');

  alert($this.attr('href') + ' is active');
});

$('.list-group .collapse').on('click', '> a', function(e) {
  var $this = $(this),
    $parent = $this.parent('.collapse');
  $parent.find('.active').removeClass('active');
  $this.addClass('active');

  alert($this.attr('href') + ' is active');
});

.list-group panel.active, .list-group panel.active a.active {
  background-color: #030;
  border-color: #aed248;
}