Как я должен дифференцировать выпадающий в начальной загрузке отзывчивый Navbar

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

он работает нормально, я почти закончил его, но застрял там, где, я думаю, проблема для пользователя. Если пользователь выбирает раскрывающийся список, все раскрывающиеся списки открываются одновременно.

Я знаю, что есть много разных навигационных панелей, но я хотел учиться самостоятельно, потому что я новичок в 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() сослаться на текущее падение dwon

$(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>