javascript - JQuery-UI 侧边菜单悬停区域太宽

Question

我有一个带有使用 jQuery-ui 构建的侧边菜单的应用程序。它可以折叠以仅显示图标或展开以还包括菜单标题。

鼠标悬停时，会弹出子菜单，其位置会根据菜单是折叠还是展开进行调整。

问题是悬停区域的宽度。扩展时它工作正常。折叠时，悬停区域宽度应与折叠菜单宽度匹配。但是，当鼠标悬停在展开菜单所在的区域时，它仍然会导致子菜单出现。

在下面的 html 中，菜单 div 的宽度在样式属性中定义，我怀疑这是我的问题的根源。但是我无法使悬停区域宽度与菜单的展开/折叠状态协调变化。我该如何解决此问题？

See JSFiddle .

html:

<div id="main$main_menu$1" class="ui-state-hover ui-corner-all menuBar">

<div id="main$visibility" class="menuContent">
    <input type='button' value='4' id='menuVisibility' class="menuToggler ui-state-default ui-corner-all" onclick="runEffect();">
</div>

<div id="main$help_menu$1" class="menuContent" style="background: none; border: none; width: 100px;">
  <span class="menuIcon">s</span>
  <span class="menu_hideable menuHidden" >Help</span>
  <ul class="menu menuDropdown  ui-menu ui-widget ui-widget-content" style="width: 79px; display: none;" id="ui-id-121" role="menu" tabindex="0">
    <li class="ui-menu-item" id="ui-id-122" tabindex="-1" role="menuitem"><div id="main$help_button$1">Contents</div></li>
    <li class="ui-menu-item" id="ui-id-124" tabindex="-1" role="menuitem"><div id="main$help_about_button$1">About</div></li>
</ul></div>
</div>

一些 CSS 样式:

.menuBar {
    padding: 0px;
    margin: 0px;
    height: 99%;
    z-index: 100;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 1.3em;
    font-size: 24pt;
}

.menuBar-Expanded {
    width: auto;
}

.menuDropdown{
    margin: -24px 0px 0px 36px;
    text-align: left;
    z-index:101;                /* dropdown on top of main menu */
    position:absolute;          /* do not displace the main menu items */
}
.menuDropdown-Expanded {
    margin: -24px 0px 0px 100px;    /* position of pop-ip when menu bar is expanded */
}
.menuContent{
    padding: 4px 4px 4px 4px;
}
.menu_hideable {
    display: inline;
}
.menuHidden {
    display: none;
}

.menuIcon {
    font-family: webdings; 
    font-size: 24pt; 
    height: 24px;
    width: 24px;
    vertical-align:middle;
}

.menuToggler {
    font-family: webdings; 
    font-size: 14pt; 
    width:20px; 
    height:20px;
}

Javascript 函数:

var collapseIcon = '3';
var expandIcon = '4';
function runEffect() {
    $(".menu_hideable").toggleClass("menuHidden");
    $("div#main\\$main_menu\\$1").toggleClass("menuBar-Expanded");
    $(".menuDropdown").toggleClass("menuDropdown-Expanded");
    if ($("#menuVisibility").val() == expandIcon) {
        $("#menuVisibility").prop('value', collapseIcon);
    } else {
        $("#menuVisibility").prop('value', expandIcon);
    }
};

$(document).ready(function() { var menu = $("#main\\$help_menu\\$1 > ul.menu").menu();
 menu.menu('widget').hide();
 $('#main\\$help_menu\\$1').hover(function () {
 var menubarWidth = $("div#main\\$help_menu\\$1").css("width");
 $("div#main\\$help_menu\\$1").addClass("ui-state-active");
 menu.menu('widget').show();
 $("div#main\\$help_menu\\$1").css("width", menubarWidth);
}, function () {
 menu.menu('widget').hide();
 $("div#main\\$help_menu\\$1").removeClass("ui-state-active");
});
$(menu).hover(function () {
 menu.menu('widget').show();
}, function () {;
 menu.menu('widget').hide();
});
});

Answer 1

好的，问题是您将悬停区域设置为宽度 100px。将它相对于宽度为 100% 的容器放置!像这样https://jsfiddle.net/peurhwam/4/

<div id="main$help_menu$1" class="menuContent" style="background: none; border: none; width: 100%;">

你的 padding 可能有问题，所以尝试将 padding 放在里面而不是直接放在悬停区域。

编辑:https://jsfiddle.net/peurhwam/6/