j查询下拉菜单显示不正确

Question

这个页面有一些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来自蓝图css或jQuery-ui css。

我使用的是jQuery UI的v.1.10.3和jQuery的v1.10.2。

每当我将鼠标悬停在下拉菜单上时，都会下拉一个空白，就像它应该的那样，但菜单项的文本在菜单右侧显示为完整菜单的宽度。直到几天前，它仍在正常工作。但是当我从jQuery v.1.9.1切换时，因为我的jQuery工具提示不起作用，我的菜单坏了。有谁知道是什么让这一切发生？

如果您需要任何其他信息，请告诉我。

Answer 1

对小提琴所做的修改

1. 在 CSS 中添加了#item_menu_list { width:188px; } - （使您的菜单链接与菜单大小相同。 您可以根据需要对其进行修改。

2. 从追加的li元素中删除了所有类。 当菜单激活时，它会自动为您添加这些类。 有一些冲突导致了您的问题。

3. 从item_menu_list元素中删除了class和style属性。 <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/

希望这对您有所帮助。

Answer 2

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;}