【发布时间】：2021-06-26 00:36:23
【问题描述】：
当我单击一个下拉开关时，它正在显示，但问题是所有其余的下拉开关都在显示：
这是我的代码：
<ul class="list-unstyled components">
<p class="user-dash"><span><img class="img-fluid" src="{{ url('/img/freddy.png') }}"></span><a href="{{ route('admin') }}">Freddy Alcarazo</a></p>
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"><span><i class="fas fa-home"></i></span> Home</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
<a href="{{ route('admin') }}">Home</a>
</li>
</ul>
</li>
<li>
<!-- <a href="#"><span class="ti-info-alt mr-2"></span>About</a>-->
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"><span class="fas fa-users"></span> Candidatos</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
<a href="{{ route('admin.candidates.index') }}">Candidatos</a>
</li>
<li>
<a href="{{ route('admin.candidates.create') }}">Nuevo Candidato</a>
</li>
</ul>
</li>
<li>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"><span class="fas fa-graduation-cap"></span> Profesiones</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
<a href="{{ route('admin.professions.index') }}">Profesiones</a>
</li>
<li>
<a href="{{ route('admin.professions.create') }}">Nueva Profesión</a>
</li>
</ul>
</li>
<li>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> <span class="fas fa-book"></span> Áreas</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
<a href="{{ route('admin.areas.index') }}">Áreas</a>
</li>
<li>
<a href="{{ route('admin.areas.create') }}">Nueva Área</a>
</li>
</ul>
</li>
</ul>
问题出在这里：
<ul class="collapse list-unstyled" id="pageSubmenu">
如果我更改它，所有这些都具有相同的 ID“pageSubmenu”，下拉切换会停止他的可视化并且我看不到他的子项。
我用 jquery 试过了：
<script>
$('#pageSubmenu').on("click", function(e) {
e.stopPropagation();
});
</script>
但它不起作用。有关如何防止此问题的任何想法，我将不胜感激..谢谢
【问题讨论】：
-
所有这些都有相同的 id "pageSubmenu" ?? ID 应该是唯一的，所以不要对多个元素使用相同的 id
-
是的，但如果我更改它不会显示。我正在使用这个模板gist.github.com/krystinalynn/43d76c05fc0601dbb2c9a18134bc672b 我只是添加了更多子菜单.. 但是更改 id 没有任何反应。
-
@Mohamed-Yousef 这里是模板bootstrapious.com/tutorial/sidebar/index.html
-
模板工作正常..但是当你复制/粘贴相同的代码时，你复制了相同的href和id ..所以需要更改
<a href="#pageSubmenu"和<ul class="collapse list-unstyled" id="pageSubmenu">，href和id应该是每个<a>和下一个<ul>相同，但每个<li>应该不同。这意味着href="#anything1"，id="anything1"下一个将是href="#anything2"，id="anything2" -
我没有注意到那个兄弟，几分钟前我正在寻找另一个模板，我发现了一个名为 adminLtev3 的东西，但它的尺寸很大，有很多依赖项。但是使用上面的植物我节省了磁盘空间并且更简单..下次我会记住这个技巧，我不是引导程序或前端开发专家，。无论如何，谢谢兄弟。
标签： jquery css bootstrap-4