jQuery dropdown not showing when clicked

Question

The jQuery dropdown menu does not pop-up when I click on the link. Here is my code.

<script src="Scripts/jquery-2.1.4.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/jquery.dropdown.css" rel="stylesheet" />
<script src="Content/bootstrap-filestyle.min.js"></script>
<script src="Scripts/jquery.dropdown.js"></script>

html:

<a href="#" data-dropdown="#ddlDept"><span class="fa fa-2x fa-gear"></span></a>

                    <div id="ddlDept" class="jq-dropdown jq-dropdown-tip">
                        <ul class="jq-dropdown-menu">
                            <li><a href="#1">Item 1</a></li>
                            <li><a href="#2">Item 2</a></li>
                            <li><a href="#3">Item 3</a></li>
                            <li class="jq-dropdown-divider"></li>
                            <li><a href="#4">Item 4</a></li>
                            <li><a href="#5">Item 5</a></li>
                            <li><a href="#5">Item 6</a></li>
                        </ul>
                    </div>

Answer 1

You need to make use of data-toggle attribute instead of data-dropdown . Also the contents you need to toggle needs to be wrapped inside a div element.

 <ul>
 <li>
   <div class="dropdown">
 <a href="#" id="ddlDept" data-toggle="dropdown"><span class="fa fa-2x fa-gear"> </span></a> 
  <ul class="dropdown-menu" aria-labelledby="ddlDept">
    <li><a href="#1">Item 1</a></li>
    <li><a href="#3">Item 3</a></li>
    <li class="dropdown-divider"></li>
    <li><a href="#4">Item 4</a></li>
</ul>
</div>
 </li>
 </ul>

Working example : http://jsfiddle.net/DinoMyte/5p341amh/263/

Answer 2

From the documentation for jQuery Dropdowns, your container div must have a unique id (check) and the jq-dropdown class "immediately before your closing body tag". For dropdown menus, the div should contain the class jq-dropdown-menu. So it looks like your only issue is prefixing all of the classes with "jq-". That includes dropdown, dropdown-tip, dropdown-divider, and dropdown-menu. http://labs.abeautifulsite.net/jquery-dropdown/