Javascript 如何区分引导响应导航栏中的下拉列表

我已经用bootstrap创建了响应导航栏，但问题是当我点击一个下拉链接时，所有下拉链接同时打开

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还不熟悉，而且还处于学习阶段。

尝试并参考当前的drop-dwon

$(this).find(".inner-bar").toggle();

$（文档）.ready（函数（）{
$（“.internal link”）。单击（函数（）{
$（this.find（“.inner bar”）.toggle（）；
});
});




计划表







位置






管理






报告







试试看

$（此）
将指向当前元素

$（this）.find（“.inner bar”）
在当前元素中查找类为
的元素。inner bar
并执行切换操作

$(document).ready(function(){
     $(".inner-link").click(function(){
          $(this).find(".inner-bar").toggle();
     });
});

文件：-

$(document).ready(function(){
     $(".inner-link").click(function(){
          $(this).find(".inner-bar").toggle();
     });
});