1

このページには、jQuery がメニューにする div がいくつかあります。

これがjsfiddleです。

<div class="span-24 last">
<div class="span-5 last menu_button">
    <ul id="item_menu" class="ui-menu">
        <li class="ui-menu-item"><a href="#">Select Item Here</a>

            <ul id="item_menu_list" class="ui-menu" style="display:block; position:relative;"></ul>
        </li>
    </ul>
</div>

これらのパラメータを使用:

$( "#item_menu" ).menu("collapseAll", null, true );

メニューがクリアされ、リセットされます。

$('#item_menu').html("");
$('#item_menu').append("<li class=\"ui-menu-item\"><a href=\"#\">Item Menu</a><ul id=\"item_menu_list\" class=\"ui-menu\" style=\"display:block; position:relative;\"></ul></li>");

次に、次のような一連の呼び出しを通じて入力されます。

 $('#item_menu_list').append("<li class=\"ui-menu-item\"><a class=\"ui-corner-all\" id=\"item_menu_list_item1\" href=\"#item1\">Item 1</a></li>");

.menu_button次の .css があります。

div
{
    color:#3079D9;
/*  background:#4334ff; */
    border-image-width:0px;
}

#menu
{
    height:32px;
/*  background:#00ccff; */
    padding-top:10px;
    padding-bottom:10px;
    border-bottom: 1px solid #3079D9;
    position: relative;
    z-index:5000;
}

#menu div
{
    position: relative;
    vertical-align:middle;
    z-index: inherit;
}

.menu_button {
    /* padding:10px; */
    position: relative;
    vertical-align:middle;
    /*z-index: inherit;*/
    margin-top:0px;
    color:#F2F2F2;
    background: #5A86BF;
    text-align:center;
    border: 1px solid #3079D9;
    border-image-width:0px;
}

.css の残りの部分は、Blueprints css または jQuery-ui css から取得されます。

jQuery UI の v.1.10.3 と jQuery の v1.10.2 を使用しています。

ドロップダウン メニューの上にマウスを置くと、本来のように空白がドロップダウンしますが、メニュー項目のテキストがメニューの右側にメニューの幅いっぱいに表示されます。数日前までは、正常に機能していました。しかし、jQuery ツールチップが機能しないために jQuery v.1.9.1 から切り替えたところ、メニューが壊れました。何がこれを実現しているのか、誰にも分かりますか？

他に情報が必要な場合はお知らせください。

4

2 に答える 2

1

あなたのフィドルに加えられた変更

  1. CSS に追加#item_menu_list { width:188px; }- (メニュー リンクをメニューと同じサイズにするため。必要に応じて変更できます。)

  2. 追加されたli要素からすべてのクラスを削除しました。メニューがアクティブになると、これらのクラスが自動的に追加されます。問題の原因となっているいくつかの競合がありました。

  3. classおよびstyle属性をitem_menu_list要素 から削除しました。<ul id="item_menu_list"></ul>クラスとスタイルが追加され、追加された要素と同じようにメニューによって自動的に追加されます。

  4. positionメニューに属性を 追加しました。$('#item_menu').menu({ position: { my: "bottom", at: "right-95 top-3" } }); これにより、メニューが開く場所を調整できます。私はすぐ下に開くようにしましたが、試してみることができます。 $('#item_menu').menu();デフォルトでは右側のメニューが開きます。

これがフィドルです。

http://jsfiddle.net/QP4BC/31/

これがお役に立てば幸いです。

于 2013-10-16T19:47:37.720 に答える
0

http://jsfiddle.net/2hxmB/1/ - jsfiddle.net での質問です。誰かが助けてくれるかもしれません。私は目的を理解していませんでした。

html:

<div class="span-5 last menu_button"> <ul id="world_menu" class="ui-menu"> <li class="ui-menu-item"><a href="#">Select World Here</a> <ul id="world_menu_list" class="ui-menu" style="display:block; position:relative;"> </ul> </li> </ul> </div>

js:

$( "#world_menu" ).menu("collapseAll", null, true ); $( '#' + menuId ).append( "<li class=\"ui-menu-item\"><a href=\"#\">" + defaultValue + "</a><ul id=\"world_menu_list\" class=\"ui-menu\" style=\"display:block; position:relative;\"></ul></li>" );

CSS:

body{background-color: #999;} .menu_button {/* padding:10px; */ position: relative; vertical-align:middle; /*z-index: inherit;*/ margin-top:0px;color:#F2F2F2;background: #5A86BF;text-align:center;border: 1px solid #3079D9;border-image-width:0px;}
于 2013-10-14T22:45:49.197 に答える