0

この問題を数時間解決しようとしていますが、特定の問題に関する情報が見つかりません。UIKit の開発者によって作成されたドキュメント ページhttp://www.getuikit.com/docs/dropdown.htmlをたどろうとしましたが、例がひどく不完全なので、そのページで使用されているソース コードも参照します。これとして：http://www.cwu.edu/~cport/assets/uikit-master/src/tests/dropdown.html#

どちらの場合も、コードを Dreamweaver に直接コピーし、Web ページをブラウザーにロードしてテストした結果、何も機能しませんが、ページに直接アクセスすると、ドロップダウンやその他のものは機能します。

何がそのような行動を引き起こすのか、私にはわかりません。これが私の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;
}

最後に、問題を説明するために私が構築しているライブ Web サイトを次に示します: http://www.logopediaspeechtherapy.com/

リスト内のすべてのボタンをロードすることから、位置的に相対的に保持されているナビゲーションオブジェクトを作成することまで、あらゆる方法をいじってみました。スタイルを display:block; に変更すると表示されるので、ドロップダウン リストが正しく読み込まれていることがわかります。uk-dropdown divの場合、ホバーまたはクリックで表示できません。

UI Kit 2.8.0 と JQuery 2.0.3 を使用しています

4

2 に答える 2

2

私もこの問題を解決することができました。ここから JQuery コードを追加しました: https://developers.google.com/speed/libraries/

私のヘッダー、UIKit jquery 呼び出しの上に。

于 2015-06-25T21:28:33.310 に答える