UIKit 下拉菜单不起作用答案

【问题标题】：UIKit drop down not workingUIKit 下拉菜单不起作用
【发布时间】：2015-06-26 05:28:33
【问题描述】：

我已经尝试解决这个问题几个小时了，但找不到任何关于我的具体问题的信息。我试图关注由 UIKit 开发人员制作的文档页面 http://www.getuikit.com/docs/dropdown.html，但它的示例非常不完整，因此我将使用该页面上使用的源代码以及这个：http://www.cwu.edu/~cport/assets/uikit-master/src/tests/dropdown.html#

在这两种情况下，直接将他们的代码复制到 Dreamweaver 中，然后在浏览器中加载网页以进行测试，结果没有任何效果，但如果我直接访问他们的页面，下拉菜单和其他内容确实有效。

我不确定是什么导致了这种行为。这是我的 html 文件中的下拉菜单：

<div class="nav_area">

    <a href="logopedia.html"><button class="uk-button uk-button-large uk-button-orange" id="lpBtn" height="12" width="145">Logopedia STS</button></a>
    <a href="carr.html"><button class="uk-button uk-button-large uk-button-orange" id="crBtn" height="12" width="145">Carr SLS</button></a>
    <a href="kinseo.html"><button class="uk-button uk-button-large uk-button-orange" id="ktBtn" height="12" width="145">Kinseo Tape</button></a>
    <a href="vitalstim.html"><button class="uk-button uk-button-large uk-button-orange" id="vsBtn" height="12" width="145">VitalStim</button></a>

    <div class="uk-button-dropdown" style="top: 10%" data-uk-dropdown>
        <button class="uk-button uk-button-large uk-button-orange" id="rrBtn" height="12" width="145">Refferal and Resources <i class="uk-icon-caret-down"></i></button>
        <div class="uk-dropdown">
            <ul class="uk-nav uk-nav-dropdown">
                <li><a href="#">Option 1</a></li>
                <li><a href="#">Option 2</a></li>
                <li class="uk-nav-divider"></li>
                <li><a href="#">Option 3</a></li>
            </ul>
        </div>
    </div>
</div>

还有这些元素的 nav.css 部分：

.nav_bkgd {
    position: absolute;
    top:30%;
    left: 31.35%;
    width:760px;
    height:80px;
    background-image:url(../media/imgs/nav_bkgd.png);
    background-repeat:no-repeat;
    z-index: 1;
}

.nav_area {
    position:absolute;
    top:30%;
    left: 31.35%;
    width: 760px;
    height:80px;

}

#lpBtn {
    position:relative;
    top:10%;
    left:3%;
    z-index:2;
}

#crBtn {
    position:relative;
    top:10%;
    left:4%;
    z-index:2;
}

#ktBtn {
    position:relative;
    top:10%;
    left:5%;
    z-index:2;
}

#vsBtn {
    position:relative;
    top:10%;
    left:6%;
    z-index:2;
}

.ddown {
    position:relative;
}

#rrBtn {
    position: relative;
    left:26%;
    z-index:2;
}

最后是我正在构建的实时网站来说明问题：http://www.logopediaspeechtherapy.com/

我尝试了各种方式来尝试让它工作，从加载列表中的所有按钮到使它们保持相对位置的导航对象。我知道下拉列表加载正确，如果我将样式更改为 display:block; 就可以看到它。对于 uk-dropdown div，但我无法让它在悬停或点击时显示。

我正在使用 UI Kit 2.8.0 和 JQuery 2.0.3

【问题讨论】：

标签： jquery html css getuikit

【解决方案1】：

我也设法解决了这个问题。我从这里添加了 JQuery 代码：https://developers.google.com/speed/libraries/

到我的标题，在 UIKit jquery 调用上方。

【讨论】：

欢迎来到 Stack Overflow！虽然这在理论上可以回答问题，it would be preferable 在此处包含答案的基本部分，并提供链接以供参考。

【解决方案2】：

我设法解决了这个问题，但我不确定是什么原因造成的。为了让下拉菜单正常工作，我必须从 GitHub 下载 UI Kit Master，然后从供应商文件夹中复制 JQuery.js 文件，然后将其链接到我的页面。

我认为他们有自定义代码或其他东西，他们使用的 JQuery 文件在发布版本中不可用。

【讨论】：