[英]jQuery Drop-down-menu Displaying Incorrectly
此頁面具有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切換到菜單時,我的菜單壞了。 有誰知道導致這種情況的原因嗎?
讓我知道您是否需要其他信息。
對您的小提琴進行的修改
添加了#item_menu_list { width:188px; }
#item_menu_list { width:188px; }
到CSS-(使菜單鏈接的大小與菜單的大小相同。您可以根據需要對其進行修改。)
從附加的li
元素中刪除了所有類。 激活菜單后,它將自動為您添加這些類。 有一些沖突正在引起您的問題。
從item_menu_list
元素中刪除了class
和style
屬性。 <ul id="item_menu_list"></ul>
類和樣式,並通過菜單自動添加,就像您添加的元素一樣。
在菜單中添加了position
屬性。 $('#item_menu').menu({ position: { my: "bottom", at: "right-95 top-3" } });
這可以讓您調整菜單的打開位置(使它在下面打開),但是您可以嘗試一下。 $('#item_menu').menu();
默認為右側打開的菜單。
這是小提琴。
希望這可以幫助你。
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;}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.