0

我已经尝试解决这个问题几个小时了，但找不到关于我的具体问题的任何信息。我试图关注由 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

4

2 回答 2

2

I also managed to fix this problem. I added the JQuery code from here: https://developers.google.com/speed/libraries/

to my header, above the UIKit jquery call.

于 2015-06-25T21:28:33.310 回答
0

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

I think that they have custom code or something and the JQuery file they use is not available in the release version.

于 2014-06-25T19:50:08.213 回答