Question

如果href等于url，我有以下代码将.active类添加到链接。它适用于菜单项，但子菜单项无法正常工作。例如，如果链接带有文字＆＃34;编辑＆＃34;单击我想将.active类添加到主链接，文本＆＃34;项目1＆＃34;。但它不起作用，你知道如何实现吗？

HTML

<nav id="nav">
    <ul class="">
        <li class="active"><a href="url">Item 0</a></li>
        <li>
            <a href="#edit" data-toggle="collapse" aria-expanded="false">
               Item 1
            </a>
            <ul class="collapse" id="edit">
                <li><a href="/create">Create</a></li>
                <li><a href="/edit">Edit</a></li>
            </ul>
        </li>
        <li><a href="/posts">Item 2</a></li>
    </ul>
</nav>

JS

$("#nav a").each(function() {
        if (this.href == window.location.href) {
            $(this).addClass("active");
        }
    });

Answer 1

请注意，子菜单有2个li个元素作为父级，而顶级菜单项只有一个li个父级：

 $(this).parents('li').length == 2  => submenu
 $(this).parents('li').length == 1  => menu

这是一个有效的例子：

＆＃13;

$(document).ready(function () {

    $("#nav a").each(function() {
        // you can change here the menus href, for test purpose 
        // I choose 'create' menu link: 'https://stacksnippets.net/create'
        if (this.href == 'https://stacksnippets.net/create') {
             
            // check if sub menu
            if ( $(this).parents('li').length == 2 ) {
              $(this).parents('ul.collapse').siblings('a').addClass('active');
            } else {
              $(this).addClass("active");
            }
        }
    });

});

＆＃13;

a.active{
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="nav">
    <ul class="">
        <li><a href="url">Item 0</a></li>
        <li>
            <a href="#edit" data-toggle="collapse" aria-expanded="false">
               Item 1
            </a>
            <ul class="collapse" id="edit">
                <li><a href="/create">Create</a></li>
                <li><a href="/edit">Edit</a></li>
            </ul>
        </li>
        <li><a href="/posts">Item 2</a></li>
    </ul>
</nav>

＆＃13;

基于网址添加有效课程不适用于子菜单

1 个答案: