Question

我正在制作一个具有子级别的垂直导航菜单。当用户单击顶级链接时，通过将其指定为“活动”类来显示子菜单。如果正在显示子菜单，并且单击了另一个顶级链接，我想从当前正在显示的子菜单中删除“活动”类。我试图从所有子菜单中调用remveClass，但是我不起作用。请给我一些指导，以实现这一目标。

<nav class="side-nav-wrap">
        <ul class="list-unstyled nav-icons-wrap">
            <li>
                <a href="" class="navbar-trigger" data-target="#homeLinks">
                    <i class="fa fa-home nav-icon"></i>
                    <span class="nav-icon-label">Home</span>
                </a>
                <ul class="list-unstyled subnav-drawer" id="homeLinks">
                    <li>
                        <a href="">
                            Test1
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>

jQuery

$(document).on('click','.navbar-trigger', function(e) {
            var $this = $(this);

            if ($this.attr('data-target')){
                var $target = $this.attr('data-target')

                $($target).toggleClass('active');

                e.preventDefault();

            } 
        });

css

.subnav-drawer {
position: absolute;
background-color: #FFFFFF;
width: 145px;
top:0px;
bottom: 0px;
left:85px;
display: none;}

.active{
display: block;}

Answer 1

您可以在适当的地方使用下一个代码，以删除当前具有该元素的一个或多个元素上的活动类：

$(".active").removeClass("active");

jQuery垂直幻灯片菜单

1 个答案: