how should i differentiate dropdown in bootstrap responsive navbar

user_6434794 0
Viewed 43

I have created responsive navbar with bootstrap but the problem is when i click on a single dropdown link all dropdown links open at the same time.

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>

i think the issue is with the jquery class i have called it with every single dropdown.

jquery

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

it is working fine i have almost completed it but it stuck at where i think is an issue for user.if user to select a dropdown, all dropdown will open at the same time.

I know there are lot's of different navbar out there to use but i wanted to learn by my own because im new to jquery and in learning phase of it.

css html jquery javascript
2 Answers

Try

$(this) will point to the current element.

$(this).find(".inner-bar") find the element with class .inner-bar inside the current element and perform the toggle operation.

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

Docs :- https://api.jquery.com/

user_22242650

Try with this and .find() to refer the current drop 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>

user_74613810
Related