單擊時不顯示jQuery下拉列表

Question

當我單擊鏈接時，不會彈出jQuery下拉菜單。 這是我的代碼。

<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

您需要使用data-toggle屬性而不是data-dropdown 。 同樣，需要切換的內容也需要包裝在div元素中。

 <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>

工作示例： http : //jsfiddle.net/DinoMyte/5p341amh/263/

Answer 2

從jQuery Dropdowns的文檔中，您的容器div必須具有唯一的ID（檢查）和jq-dropdown類“緊接在結束body標記之前”。 對於下拉菜單，div應該包含類jq-dropdown-menu。 因此，看來您唯一的問題是在所有類的前面加上“ jq-”。 其中包括下拉菜單，下拉菜單提示，下拉菜單分隔符和下拉菜單。 http://labs.abeautifulsite.net/jquery-dropdown/