Question

我一直试图解决这个问题几个小时，但找不到有关我具体问题的任何信息。我试图按照UIKit的开发人员制作的文档页面http://www.getuikit.com/docs/dropdown.html，但它的例子非常不完整，所以我要按照该页面上使用的源代码以及这个：http://www.cwu.edu/~cport/assets/uikit-master/src/tests/dropdown.html# < / p>

在这两种情况下，直接将他们的代码复制到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/

我试图通过加载列表中的所有按钮来制作导航对象，并将其保持在相对位置的各种方式。我知道下拉列表正确加载，因为我可以看到它，如果我改变要显示的样式：块;对于uk-dropdown div，我无法在悬停或点击时显示它。

我正在使用UI Kit 2.8.0和JQuery 2.0.3

Answer 1

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

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

Answer 2

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

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

UIKit下拉不工作

2 个答案: