0

我使用菜单栏小部件创建了一个 jQuery UI 导航菜单。它按我的预期工作，只是我希望它的行为略有不同。正如您在此处看到的http://jsfiddle.net/hcharge/DebVr/子菜单展开并相对于单击的链接定位。

我希望它展开并固定在导航栏的左侧，无论单击哪个链接，子菜单都将始终保持相同的宽度。比如这张图...

在此处输入图像描述

我尝试设置相对于容器的位置并绝对定位子菜单，但是我认为 jQuery UI 定位覆盖了这一点。任何建议都会很棒，干杯。

编辑：这需要用 JS 来完成，因为它必须是点击而不是触发下拉菜单的悬停动作

4

1 回答 1

2

为什么不只使用 CSS 来完成这一切？

见http://jsfiddle.net/DebVr/8/

注意：为了看到白色边框，背景是蓝色的。

编辑：

如果你想要一些功能，你可以在以后添加它，但我认为基础应该是 CSS。

在此处查看具有某些功能的代码：http: //jsfiddle.net/DebVr/11/

var links=$('#bar1>li>a').each(function(index,obj) {
  obj.tabindex=index+1;
});
$('#bar1>li>a').focus(
    function(){$(this).siblings('ul').show();}
);
$('#bar1>li>a').blur(
    function(){$('#bar1>li>ul').hide();}
);

编辑2：

如果要在单击时再次隐藏子菜单，请使用以下代码：

var links=$('#bar1>li>a').each(function(index,obj) {
  obj.tabIndex=index+1;
});
$('#bar1>li>a').focus(function(){
    $(this).siblings('ul').addClass('show');
});
$('#bar1>li>a').mousedown(function(){
    $(this).siblings('ul').toggleClass('show');
});

$('#bar1>li>a').blur(function(){
   $(this).siblings('ul').removeClass('show');
});

和 CSS：

#bar1>li>ul.show{
    display:block;
}

在这里看到它：http: //jsfiddle.net/DebVr/16/

编辑 3：

在上面的代码中，我替换obj.tabindex为obj.tabIndex，并更新了 jsfiddle。

问题是，如果您单击子菜单，锚点会失去焦点，然后子菜单就会消失。在 Chrome 上，可以很容易地修复将focus事件设置为#bar1>li而不是#bar1>li>a，但随后该事件在 firefox 上不起作用......我正在研究解决方案，但同时您可以使用http://jsfiddle.net/DebVr/ 16/。

编辑4：

最后，固定代码：http: //jsfiddle.net/DebVr/18/

它适用于 Chrome、Firefox 和 IE。

于 2012-08-17T13:32:32.903 回答