jQuery下拉菜单显示不正确答案

【问题标题】：jQuery Drop-down-menu Displaying IncorrectlyjQuery下拉菜单显示不正确
【发布时间】：2013-10-17 03:47:37
【问题描述】：

这个页面有一些 jQuery 制作成菜单的 div。

Here 是 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。

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

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

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

【问题讨论】：

你能做一个演示这个问题的小提琴吗？ jsfiddle.net
这是个好问题，我会试一试。
我有一个 jsfiddle 在这里复制了这个问题。 jsfiddle.net/QP4BC/21
我在看你的小提琴，但是当我将鼠标悬停在下拉菜单上时，我看不到发生这种情况Whenever I mouse over the dropdown menus, a white space drops down, just like it should, but the text for the menu-items appears a full menu's-width to the right of the menu`我无法让鼠标悬停在上面工作。我现在在您的小提琴中看到的是这些项目正在运行到您的项目菜单 div 中。像 .ui-menu {margin-top: 8px;} 这样的一些 CSS 可以解决这个问题。如果这不是您想要的，您可能需要进一步澄清您的问题。
该死，我一定忘了更新 jsfiddle。这真的很烦人。我更新了它：jsfiddle.net/QP4BC/27

标签： javascript jquery html css blueprint-css

【解决方案1】：

对小提琴的修改

在您的 CSS 中添加了 #item_menu_list { width:188px; } -（使您的菜单链接与菜单大小相同。您可以根据需要对其进行修改。）
从附加的 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/QP4BC/31/

希望对你有所帮助。

【讨论】：

做到了！非常感谢。

【解决方案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;}

【讨论】：