jquery - 在菜单中将类从 "collapse"更改为 "collapse in"

Question

我有这个左侧站点菜单:

<ul class="list-group sidebar-nav-v1" id="sidebar-nav">
     <li class="list-group-item list-toggle">                   
           <a data-toggle="collapse" data-parent="#sidebar-nav" href="#collapse-typography">Typography</a>
           <ul id="collapse-typography" class="collapse">
                  <li><a href="link_1"> Name 1</a></li>
                  <li><a href="link_2"> Name 2</a></li>                            
                  <li><a href="link_3"> Name 3</a></li>
                  <li><a href="link_4"> Name 4</a></li>
           </ul>
     </li>

    .
    .
    .
    .
</ul>

添加(active)到“li”元素完成:

var url = window.location;

$('ul.list-group a[href="' + url + '"]').parent().addClass('active');
$('ul.list-group a').filter(function () {
    return this.href == url;
}).parent().addClass('active').parent().parent().addClass('active');

现在我只需要改变

<ul id="collapse-typography" class="collapse">

进入

<ul id="collapse-typography" class="collapse in">

关于如何执行此操作的任何想法？

Answer 1

使用下面的代码

$('ul.list-group a[href="' + url + '"]').parent().addClass('active');
$('ul.list-group a').filter(function () {
  return this.href == url;
}).parent().addClass('active').parents('ul.collapse').addClass('in').parents('li.list-toggle').addClass('active');