我已经使用 bootstrap 创建了响应式导航栏,但问题是当我单击单个下 zipper 接时,所有下 zipper 接都会同时打开。
HTML
<div id="inner-navbar">
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Template</a></li>
<li class="inner-link" data-target="1">Schedule <i class="fas fa-caret-down"></i>
<ul class="inner-bar">
<li><a href="">link 1</a></li>
<li><a href="">link 1</a></li>
<li><a href="">link 1</a></li>
</ul>
</li>
<li><a href="">People</a></li>
<li class="inner-link">Location <i class="fas fa-caret-down"></i>
<ul class="inner-bar">
<li><a href="">link 1</a></li>
<li><a href="">link 1</a></li>
<li><a href="">link 1</a></li>
</ul>
</li>
<li class="inner-link">Admin <i class="fas fa-caret-down"></i>
<ul class="inner-bar">
<li><a href="">link 1</a></li>
<li><a href="">link 1</a></li>
<li><a href="">link 1</a></li>
</ul>
</li>
<li class="inner-link">Reports <i class="fas fa-caret-down"></i>
<ul class="inner-bar">
<li><a href="">link 1</a></li>
<li><a href="">link 1</a></li>
<li><a href="">link 1</a></li>
</ul>
</li>
</ul>
</nav>
</div>
我认为问题出在我在每个下拉菜单中调用它的 jquery 类。
jquery
$(document).ready(function(){
$(".inner-link").click(function(){
$(".inner-bar").toggle();
});
});
它工作正常,我几乎完成了它,但它停留在我认为对用户来说是一个问题的地方。如果用户选择一个下拉列表,所有下拉列表将同时打开。
我知道有很多不同的导航栏可供使用,但我想自己学习,因为我对 jquery 很陌生,并且处于学习阶段。
最佳答案
尝试
$(this)
将指向当前元素。
$(this).find(".inner-bar")
在当前元素中查找类为 .inner-bar
的元素并执行切换操作。
$(document).ready(function(){
$(".inner-link").click(function(){
$(this).find(".inner-bar").toggle();
});
});
关于javascript - 我应该如何区分引导响应导航栏中的下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54235360/