javascript - 我应该如何区分引导响应式导航栏中的下拉菜单

Question

我已经使用 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 的新手并且正处于学习阶段。

Answer 1

尝试

$(this) 将指向当前元素。

$(this).find(".inner-bar") 在当前元素中找到类为.inner-bar的元素并执行切换操作。

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

文档:- https://api.jquery.com/