我應該如何區分引導響應導航欄中的下拉菜單

Question

我已經使用引導程序創建了響應式導航欄，但問題是當我單擊單個下拉鏈接時，所有下拉鏈接都同時打開。

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();
        });
    });

它工作正常，我幾乎完成了它，但它停留在我認為是user.If用戶選擇一個問題的地方，如果用戶選擇一個下拉菜單，則所有下拉菜單將同時打開。

我知道有很多不同的導航欄可以使用，但是我想自己學習，因為即時消息對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/

Answer 2

嘗試與this和.find()引用當前的.find()

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

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> <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>