代码之家 › 专栏 › 技术社区 › gchq

嵌套引导边栏项将玩具抛出

twitter-bootstrap css

gchq · 技术社区 · 7 年前

<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>

但它产生了这个结果

点击后它就会关闭,而不是打开李项目……这可能是一个非常基本的东西,但凝视它的艺术尚未产生任何结果:-)

我怀疑点击子菜单项会关闭家长,但不知道如何克服这一点。也不知道为什么格式会完全不同!

非常感谢。

如果删除了第二个accordion group div,则会处理空白菜单项,并禁用脚本

<script>

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

现在剩下两个问题

如何在不关闭手风琴组的情况下选择子菜单项?
如何将子菜单项设置为与其他项相同的颜色(白色而非橙色)?

1 回复 | 直到 7 年前

gchq 7 年前

终于找到了解决问题一的方法

向子菜单项添加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');

       });