Question

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

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

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

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

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

我认为问题是用于调用悬停功能的选择器设置为此'#main \ $ help_menu \ $ 1'。这包括隐藏内容，当您将鼠标悬停在隐藏内容上时会激活该内容。

更改以下行：

$('#main\\$help_menu\\$1').hover(function () {

到此：

$('.menuIcon').hover(function () {

Answer 2

好的问题是您将悬停区域设置为宽度100px。相对于宽度为100％的容器！像https://jsfiddle.net/peurhwam/4/

一样

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

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

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

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

2 个答案: