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>

in that first ul in link tag.. that span class has an icon which works like link for dropdown — AXGuy
– AXGuy, Commented Jan 29, 2016 at 17:55

DinoMyte · Accepted Answer · 2016-01-29 18:30:24Z

2

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/

edited Jan 29, 2016 at 18:30

answered Jan 29, 2016 at 18:16

DinoMyte

8,8781 gold badge21 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AXGuy Over a year ago

Thanks a lot. But I want to use that jquery-dropdown.

mhodges · Accepted Answer · 2016-01-29 18:12:29Z

1

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/

answered Jan 29, 2016 at 18:12

mhodges

11.2k2 gold badges32 silver badges48 bronze badges

2 Comments

AXGuy Over a year ago

I am not able to figure out what exactly is the problem. I did like this but not showing : jsfiddle.net/ywWjE/19

AXGuy Over a year ago

Yes. the only issue was jq prefix. Also I needed to add jq prefix to data toggle in link tag.

Collectives™ on Stack Overflow

jQuery dropdown not showing when clicked

html:

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

html:

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related