html - Bootstrap - 让指定的当 data-toggle="collapse" 时标签打开

Question

如果它的孩子有一个“活动”类，我想让“数据管理”li默认打开。

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 来启动 bootstrap collapse 功能，如果找到活动类：

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 

}); 

我希望这有帮助。