2

我正在使用 MetisMenu，当我在第三层菜单项上有一个链接时，一旦单击该链接，父菜单项就会全部折叠。

二级菜单项链接正常工作。

我的示例代码在这里：

<div class="navbar-default sidebar" role="navigation">

<div class="sidebar-nav navbar-collapse">

    <ul class="nav in" id="side-menu">

        <li>
            <a href="#"><i class="fa fa-sitemap fa-fw"></i> Multi-Level Dropdown<span class="fa arrow"></span></a>
            <ul class="nav nav-second-level collapse">
                <li><a href="/admin/index"> Works Correctly!</a></li>                   
                <li>
                    <a href="#">Third Level <span class="fa arrow"></span></a>
                    <ul class="nav nav-third-level">
                        <li><a href="/admin/layers/index"> DOES NOT WORK - ALWAYS COLLPOASE PARENTS</a></li>          
                    </ul>
                </li>

            </ul>
        </li>       

    </ul>

</div>

enter code here

4

3 回答 3

3

与上述类似的问题和类似的解决方案，只是将添加类添加active到所有嵌套<li>的 . 这允许 chevron-right 成为 chevron-down。

var url = window.location;
var element = $('ul.nav a').filter(function () {
    return this.href == url;
});

if (element) {
    element.addClass('active').parents('#side-menu ul').addClass('in');
    element.parents('#side-menu li').addClass('active');
}
于 2016-07-08T16:34:06.797 回答
0 
var url = window.location;
// var element = $('ul.nav a').filter(function() {
//     return this.href == url;
// }).addClass('active').parent().parent().addClass('in').parent();
var element = $('ul.nav a').filter(function() {
    return this.href == url;
}).addClass('active').parent();

//    while (true) {
//    if (element.is('li')) {
//           element = element.parent().addClass('in').parent();
//        } else {
//            break;
//        }
//   }

这可以解决问题，伙计们在此处输入图像描述

于 2016-10-11T02:23:26.923 回答
0

我们最近遇到了这个问题，很多调试表明，问题在于 sb-admin 如何将 html 元素标记为活动的（特别是“li”标签）。

有问题的文件是 sb-admin-2.js。在底部它有以下代码：

var url = window.location;
var element = $('ul.nav a').filter(function() {
    return this.href == url || url.href.indexOf(this.href) == 0;
}).addClass('active').parent().parent().addClass('in').parent();
if (element.is('li')) {
    element.addClass('active');
}

首先，sb-admin 计算您的 URL 的深度级别并使用此数字来索引子元素。然后它使用这个数字从下到上遍历 DOM 树的特定分支。然后它将这些元素标记为“活动”。

在我们的例子中，URL 不会改变，但元素的数量会改变（对于三层深度结构，它将是 3，但索引仍然是 2）。因此，第三层和第二层元素会变为活动状态，但其他所有元素都标记为被动，因此顶部元素会折叠，隐藏整个子菜单。

这就是我们修复它的方式（我不是 JS 人，所以我不知道这个解决方案有多好，但它确实有效）：

var url = window.location;
$('ul.nav a').filter(function () {
    return this.href == url || url.href.indexOf(this.href) == 0;
}).addClass('active').parents('#side-menu ul').addClass('in');

高温高压

于 2016-05-25T08:11:02.320 回答