Dropdown Menu of bootstrap doesn't work?

Question

I am trying to create a dropdown menu with responsive feature but the dropdown menu does not work when I click on them then nothing is open here is the code

        <div class="navbar-header">
           <button type="button" class="navbar-toggel" data-toggel="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        <a class="navbar-brand" href="#">RG_ACADEMY</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>

            <li class="dropdown">
              <a class="dropdown-toggel"  data-toggel="dropdown" href="#">About us <span class="caret"> </span> </a>
              <ul class="dropdown-menu">
                <li><a href="#">About Academy</a></li>
                <li><a href="#">Faculty Team</a></li>
              </ul>
            </li>

              <li class="dropdown">
              <a class="dropdown-toggel" data-toggel="dropdown" href="#">Courses <span class="caret"> </span> </a>
              <ul class="dropdown-menu">
                <li><a href="#">JEE MAINS+ADVANCED</a></li>
                <li><a href="#">JEE MAINS</a></li>
              </ul>
              </li>

          </ul>
        </div>
    </div>

  </nav>

and the output is and also the sign I do not understand why it is the show

Answer 1

Just fix your spelling. Bootstrap can't target your classes correctly if they're spelled wrong. Bootstrap uses the spelling toggle , not toggel -

    <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    <a class="navbar-brand" href="#">RG_ACADEMY</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>

        <li class="dropdown">
          <a class="dropdown-toggle"  data-toggle="dropdown" href="#">About us <span class="caret"> </span> </a>
          <ul class="dropdown-menu">
            <li><a href="#">About Academy</a></li>
            <li><a href="#">Faculty Team</a></li>
          </ul>
        </li>

          <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Courses <span class="caret"> </span> </a>
          <ul class="dropdown-menu">
            <li><a href="#">JEE MAINS+ADVANCED</a></li>
            <li><a href="#">JEE MAINS</a></li>
          </ul>
          </li>

      </ul>
    </div>
</div>

Answer 2

It works. Your error is that you mis-spelled toggle to toggel everywhere in your code. Correct that and it all works perfectly fine.

<nav>
 <div>
<div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        <a class="navbar-brand" href="#">RG_ACADEMY</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li class="dropdown">
              <a class="dropdown-toggle"  data-toggle="dropdown" href="#">About us <span class="caret"> </span> </a>
              <ul class="dropdown-menu">
                <li><a href="#">About Academy</a></li>
                <li><a href="#">Faculty Team</a></li>
              </ul>
            </li>

              <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Courses <span class="caret"> </span> </a>
              <ul class="dropdown-menu">
                <li><a href="#">JEE MAINS+ADVANCED</a></li>
                <li><a href="#">JEE MAINS</a></li>
              </ul>
              </li>

          </ul>
        </div>
    </div>

  </nav>

Include bootstrap classes along with jquery.

JSFIDDLE

Answer 3

You have errors in the code "toggel is TOGGLE" for example.

It does not make you add functionality javascript should bootstrap the catch automatically if you have well the call to your JS

Example dropdown menu

Answer 4

Try This code for your problem

<script src="content/js/jquery.min.js"></script>
<script src="content/js/bootstrap.min.js"></script>
<script>
 $(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>

Answer 5

Change : dropdown-toggel to dropdown-toggle and data-toggel="dropdown" to data-toggle="dropdown"

Partially corrected output : Demo

Answer 6

try this before body:

<script>
     $(function () {
       $('.dropdown-toggle').dropdown();
     }); 
</script>