Question

感谢trevorp基本侧导航栏完美运行。然后我需要嵌套一些菜单项。这对我来说似乎合乎逻辑

<li class="collapsed active">
                <div class="accordion-group">
                    <a data-toggle="collapse" data-target="#20"><i class="dropdown-toggle"></i>Accounting  <span class="caret"></span></a>
                    <ul class="sub-menu collapse" id="20">
                        <li class="collapsed active">
                            <div class="accordion-group">
                                <a data-toggle="collapse" data-target="#21"><i class="dropdown-toggle"></i>Income  <span class="caret"></span></a>
                                <ul class="sub-menu collapse" id="21">
                                    <li><a href="#49">Customers</a></li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="#22">Purchases</a></li>
                        <li><a href="#23">General Ledger</a></li>
                        <li><a href="#24">Banks</a></li>
                        <li><a href="#25">Invoicing</a></li>
                        <li><a href="#26">Financials</a></li>
                        <li><a href="#27">Utilities</a></li>
                        <li><a href="#28">Reports</a></li>
                    </ul>
                </div>
            </li>

但它产生了这个结果

点击时关闭，而不是打开li项目...它可能是非常基本的东西，但是盯着它的艺术还没有产生任何结果： - ）

我怀疑点击子菜单项是关闭父级，但不知道如何克服它。不知道为什么格式也完全不同！

谢谢

=======================更新=======================

如果删除了第二个手风琴组div，则会关注空白菜单项并禁用脚本

<script>

/* ensure any open panels are closed before showing selected */
$('.accordion-group').on('show.bs.collapse', function () {
    $('.accordion-group .in').collapse('hide');
});

当另一个打开时，关闭主菜单项的

会产生此结果..

现在留下两个问题

如何在不关闭手风琴组的情况下选择子菜单项？
如何将子菜单项格式化为与其他项目相同的颜色（白色而不是橙色）？

Answer 1

最后设法找到解决问题的方法

如果有一种不那么冗长的方法，我很乐意听到： - ）

将onlick方法添加到子菜单项

<li class="collapsed active">
                                    <a onclick="holdCollapse();" data-toggle="collapse" data-target="#Menu_21" class="dropdown-toggle  collapsed"><i class="fa fa-gift fa-lg"></i>Income  </a>
                                    <ul class="sub-menu collapse" id="Menu_21">
                                        <li><a href="#Menu_49">Customers</a></li>
                                    </ul>
                                </li>

并添加隐藏字段

 <input type="hidden" value="0" id="HiddenField" />

添加此脚本

<script>
function holdCollapse(e) {
    $('#HiddenField').val('1');
}

并编辑原始脚本

<script>
/* ensure any open panels are closed before showing selected */
$('.accordion-group').on('show.bs.collapse', function () {
    var isSubMenu = $('#HiddenField').val();
    if (isSubMenu == '0') {
        $('.accordion-group .in').collapse('hide');
    }
    $('#HiddenField').val('0');

       });

嵌套的Bootstrap侧边栏项目将玩具扔出去

1 个答案: