Javascript 如何在单击时添加活动类并防止子菜单向上滑动

我正在尝试添加/删除活动类，并防止我的子菜单在活动时向上滑动。如果我单击特定选项卡，它应该处于活动状态，直到我切换到另一个选项卡。已尝试使用addclass/removeclass，但在html onclick中没有更改。有人能建议如何实现这一点吗

当我单击任何子菜单时，它将删除活动状态并向上滑动，如下所示：

我的侧边栏：

<nav id="sidebar">
<div class="sidebar-header">
    <div class="p-b-13">
        <img src="{{url('/asset/login/images/itk.png')}}" alt="itk" class="center">
    </div>
    <h6 align="center">Sistem Informasi</h6>
    <h3 class="h3_sidebar" align="center" style="color:#0067B2">MANAJEMEN</h3>
</div>

<ul class="list-unstyled components">
    <li>
        <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">SPJ dan LPJ <i class="fa fa-caret-down float-right mr-2"></i></a>
        <ul class="collapse list-unstyled" id="homeSubmenu">
            <li>
                <a href="{{url('/keuangan/spj/')}}">Surat Pertanggung Jawaban</a>
            </li>
            <li>   
                <a href="#">Laporan Pertanggung Jawaban</a>
            </li>

        </ul>
    </li>

    <li>
        <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">Akun Belanja  <i class="fa fa-caret-down float-right mr-2"></i></a>
        <ul class="collapse list-unstyled" id="pageSubmenu">
            <li>
                <a href="{{url('/keuangan/akunbelanja/')}}">Daftar Akun Belanja</a>
            </li>
            <li>
                <a href="#">Panduan Akun Belanja</a>
            </li>
        </ul>
    </li>

    <li>
        <a href="#">Help</a>
    </li>

    <li>
        <a href="#">Contact</a>
    </li>
</ul>
</nav>

信息系统
马纳杰门

js:

$（文档）.ready（函数（）{
$（“.ul.a”）。在（“单击”，函数（）{
$（“.ul”）.find（“.active”）.removeClass（“active”）；
$（此）.addClass（“活动”）；
});
});

修复jQuery函数：

将所有

.ul

更新为

ul

并将

.a

更新为

a

，因为它不是类，而是标签

<script>
        $(document).ready(function () {
            $("ul a").on("click", function () {
                $("ul").find(".active").removeClass("active");
                $(this).addClass("active");
            });
        });
    </script>

$（文档）.ready（函数（）{
$（“ul a”）。在（“单击”，函数（）{
$（“ul”）.find（“.active”）.removeClass（“active”）；
$（此）.addClass（“活动”）；
});
});

工作样本如下所示

如果您打算使用带有下拉功能的完美示例侧导航，请参阅下面的代码。它应该有效。它是用JavaScript编写的。如果需要，可以与jQuery合并

/*循环所有下拉按钮，在隐藏和显示其下拉内容之间切换-这应该避免冲突*/
var dropdown=document.getElementsByClassName（“dropdownbtn”）；
var i；
对于（i=0；i

身体{
字体系列：“Lato”，无衬线；
}
/*固定侧导航，全高*/
.侧导航{
身高：100%；
宽度：200px；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#111；
溢出x：隐藏；
填充顶部：20px；
}
/*设置sidenav链接和下拉按钮的样式*/
.sidenav a、.dropdown btn{
填充：6px 8px 6px 16px；
文字装饰：无；
字体大小：20px；
颜色：#818181；
显示：块；
边界：无；
背景：无；
宽度：100%；
文本对齐：左对齐；
光标：指针；
大纲：无；
}
/*鼠标悬停*/
.sidenav a:悬停，.下拉列表btn:悬停{
颜色：#f1f1；
}
/*主要内容*/
梅因先生{
左边距：200px；/*与sidenav的宽度相同*/
字体大小：20px；/*增加文本以启用滚动*/
填充：0px 10px；
}
/*将活动类添加到活动下拉按钮*/
.主动{
背景颜色：橙色；
颜色：白色；
}
/*下拉式容器（默认情况下隐藏）。可选：添加较浅的背景色和一些左填充以更改下拉内容的设计*/
.下拉式容器{
显示：无；
背景色：#262626；
左侧填充：8px；
}
/*可选：设置插入符号向下图标的样式*/
.fa插入符号向下{
浮动：对；
右边填充：8px；
}
/*一些媒体对响应性的质疑*/
@媒体屏幕和屏幕（最大高度：450像素）{
.sidenav{填充顶部：15px；}
.sidenav a{字体大小：18px；}
}
下拉列表
边栏下拉列表
单击下拉按钮打开侧面导航内的下拉菜单

此侧边栏为全高（100%），始终显示

一些随机文本

这里有几点：

• 代码中缺少CSS，因此我必须做出一些假设
• 当您在jQuery中导航时，在应该使用

  ul

  的地方使用

  .ul

  。类似于

  .a

  和

  a

• 我已经在源代码中记录了

$（文档）.ready（函数（）{
$（“ul li>a”）。在（“单击”，函数（）{
$（“ul”）.find（“.active”）.removeClass（“active”）；
$（此）.addClass（“活动”）；
$（“ul”）.find（“ul”）.css（“显示”、“无”）；/*关闭子菜单*/
$（this）.next（“ul”）.css（“显示”、“块”）；/*显示子菜单*/
});
});
/*默认链接颜色*/
a{
颜色：紫色；
}
/*活动链接的颜色*/
a、 活跃的{
颜色：红色；
}
/*默认情况下隐藏子菜单的*/
ul>li>ul{
显示：无；
}

信息系统
马纳杰门






















您正在使用angularJS？@fidelcastro不，这基本上是我在laravel项目中的观点：/
<script>
        $(document).ready(function () {
            $("ul a").on("click", function () {
                $("ul").find(".active").removeClass("active");
                $(this).addClass("active");
            });
        });
    </script>