Bootstrap - 当data-toggle =“collapse”</li>时，让指定的<li>标签打开

Question

我希望默认情况下打开“数据管理”，如果它的孩子有一个“活跃”的类。

JSfiddle的例子：

http://jsfiddle.net/MgcDU/5622/

HTML：

<div class="span4 well well-small">
            <ul id="action-menu" class="nav nav-list">
                <li class="nav-header">Navigation</li>
                <li ><a href="<?php echo base_url();?>admin" class=""><i class="icon-th"></i> Overview </a></li>
                <li>
                    <a href="#datamanagement-child" data-toggle="collapse"><i class="icon-book"></i> Data Management</a>
                    <ul id="datamanagement-child" class="nav nav-list collapse">
                        <li class="active"><a href="<?php base_url();?>admin/company" id="company-dm"><i class="icon-folder-close"></i> Company</a></li>
                        <li><a href="<?php base_url();?>admin/employee"><i class="icon-user"></i> Employee</a></li>
                        <li><a href="<?php base_url();?>admin/department"><i class="icon-home"></i> Department</a></li>
                        <li><a href="<?php echo base_url() . "admin/position";?>"><i class="icon-indent-right"></i> Position</a></li>
                    </ul>

                    </li>
                <li>
                    <a href="#timekeeping-child" data-toggle="collapse"><i class="icon-time" ></i> Time keeping</a>
                    <ul id="timekeeping-child" class="nav nav-list collapse">
                        <li><a href="#"><i class="icon-edit"></i> Log employee</a></li>
                        <li><a href="#"><i class="icon-th-list"></i> Show logs</a></li>
                    </ul>
                </li>

                <li><a href="#"><i class="icon-briefcase"></i> Accounts</a></li>
                <li><a href="#"><i class="icon-list-alt"></i> Reports</a></li>
                <li class="divider"></li>
            </ul>
        </div>

我该怎么做？

Answer 1

解决方案1 ​​

您只需在数据管理哈希上模拟click()即可。这也将成为切换动画。

$("[href='#datamanagement-child']").click();

JSFIDDLE

解决方案2

在数据管理后为in添加ul课程。

 <ul id="datamanagement-child" class="nav nav-list in collapse">
     ...
 </ul>

JSFIDDLE

结果就像在下面的屏幕截图中一样：

  

Answer 2

如果只希望它打开，如果它有一个子li并且类为“active”，则可以使用这一点启动引导程序的jQuery如果找到活动类，则折叠函数：

if($("#datamanagement-child li.active").is("*")) {
     $("#datamanagement-child").collapse("show");
}

或者，如果您只是希望它在没有幻灯片效果的情况下显示，则可以使用以下代码：

if($("#datamanagement-child li.active").is("*")) {
     $("#datamanagement-child").addClass("in");
}

上述代码中的任何一个都需要在您的内容中出现：

$(document).ready(function(){ 

// Code Here 

}); 

我希望这会有所帮助。