我正在尝试添加/删除事件类并防止我的子菜单在事件时向上滑动。如果我单击特定选项卡,它应该处于事件状态,直到我切换到另一个选项卡。尝试使用 addclass/removeclass,但 html onclick 没有变化。谁能建议如何实现这一目标。
when submenu 'akun belanja' is active
当我点击任何子菜单时,它会移除事件状态并向上滑动,如下所示:
我的侧边栏:
<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:
<script>
$(document).ready(function () {
$(".ul .a").on("click", function () {
$(".ul").find(".active").removeClass("active");
$(this).addClass("active");
});
});
</script>
最佳答案
这里有几点:
- 代码中缺少您的 CSS,因此我必须做出一些假设
- 当您在 jQuery 中导航时,您在应该使用
ul
的地方使用.ul
。.a
和a
类似。 - 我已经在源代码中进行了记录。
$(document).ready(function() {
$("ul li > a").on("click", function() {
$("ul").find(".active").removeClass("active");
$(this).addClass("active");
$("ul").find("ul").css("display", "none"); /* close submenu */
$(this).next("ul").css("display", "block"); /*display submenu */
});
});
/* default link color */
a {
color: purple;
}
/* color for active link */
a.active {
color: red;
}
/* hide submenu's by default */
ul>li>ul {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="sidebar">
<div class="sidebar-header">
<div class="p-b-13">
<img src="" 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="#">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="#">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>
关于javascript - 如何在点击时添加事件类并防止子菜单向上滑动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59477665/