dropdow menu not working

Question

my dropdown menu is not working.. i thing there is something wrong with data-toggle atribute .. here is my code for html:

<div class="col-md-8 col-sm-6"  >
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle Navigation </span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

    </div>

    <div class="navbar-collapse collapse  ">
        <ul class="top-nav nav navbar-nav navbar-right">
            <li class="nli" ><a href="index.html">Home</a></li>
            <li class="nli" ><a href="#">About</a></li>



            <li class="nli" ><a href="#signin" data-toggle="modal">Sign In</a></li>
            <li class="nli" ><a href="#">Contact</a></li>
            <li class="top-nav dropdown">
                <a href="#" class=" dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services <span class="caret"></span></a>
                <ul class=" drop dropdown-menu">
                    <li class="dli" ><a href="#">Animation</a></li>
                    <li class="dli"><a href="#">Animation</a></li>
                    <li class="dli"><a href="#">Animation</a></li>
                </ul>
            </li>
        </ul>
        </div>
        </div>
        </div>
    </div>
</div>

i added jquery in footer like that:

<script src="bootstrap/js/jquery.js" type="text/javascript"></script>

Answer 1

You can achieve through a toggle:

$('.dropdown-toggle').click(function() {
  $('ul.drop').toggle();
});