Question

我正在使用MetisMenu，当我在第三层菜单项上有链接时，父菜单项在点击链接后全部崩溃。

第二级菜单itme链接正常工作。

我的示例代码在这里：

<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

Answer 1

与上述类似的问题和类似的解决方案，只添加了对所有嵌套active添加类<li>。这使得V形右边成为V形下垂。

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');
}

Answer 2

我们最近遇到了这个问题，很多调试显示，问题在于sb-admin如何将html元素标记为活动（具体来说，＆＃34; li＆＃34;标记）。

有问题的文件是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树的特定分支。然后它将这些元素标记为＆＃34; active＆＃34;。

在我们的例子中，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');

HTH

Answer 3

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;
//        }
//   }

这会做伎俩enter image description here

MetisMenu第三级总是崩溃

3 个答案: