- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在努力让只有键盘的用户可以浏览我的菜单。当用户单击链接时,会打开一个显示菜单的面板。用户可以很好地浏览链接,但当用户到达菜单末尾并且焦点位于下一个元素时,上一个菜单将关闭。
参见示例:http://codepen.io/AdamWills/pen/Ejstd
显然我的 focusout 函数不能正常工作,但我不确定如何正确地做到这一点。
有什么想法吗?
HTML:
<div>
<p><a class="open" href="#">Open menu 1</a></p>
<div class="panel hidden">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
</div>
<div>
<p><a class="open" href="#">Open menu 2</a></p>
<div class="panel hidden">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
</div>
<p><a href="#">Next Link</a></p>
JS:
$('.open').on('click', function() {
$(this).parent().parent().find('.panel').toggleClass('hidden');
});
$('.panel').on('focusout',function() {
$(this).addClass('hidden');
});
编辑:这不是我的生产 HTML - 只是我正在使用的基本结构的一个简单示例。
最佳答案
我在审查您的代码时注意到了几个问题。有些您可能知道,有些则需要您进行一些研究。
要解决嵌套子菜单的问题,请使用适当的标题属性以提高可用性,并确保标记 CSS 以捕获鼠标事件以保持此功能。
HTML
<ul>
<li class="open">
<a href="javascript:void(0);" title="Open menu 1"><span>Open menu 1</span></a>
<ul class="panel hidden">
<li><a href="#">Menu 1 Link 1</a></li>
<li><a href="#">Menu 1 Link 2</a></li>
</ul>
</li>
<li class="open">
<a href="javascript:void(0);" title="Open menu 2"><span>Open menu 2</span></a>
<ul class="panel hidden">
<li><a href="#">Menu 2 Link 1</a></li>
<li><a href="#">Menu 2 Link 2</a></li>
</ul>
</li>
<li class="open">
<a href="javascript:void(0);" title="Open menu 3"><span>Open menu 3</span></a>
<ul class="panel hidden">
<li><a href="#">Menu 3 Link 1</a></li>
<li><a href="#">Menu 3 Link 2</a></li>
</ul>
</li>
</ul>
除了子菜单的嵌套之外,您还可以使用 HTML nav
元素。不要在href
中使用hash #
以确保页面不会跳转。我已将 span 添加到 anchor 标记,以便您在 CSS 中有更多选项。 使用标题属性提高可用性(屏幕阅读器、SEO 等)。
CSS
ul { display: block; }
ul li { background-color: grey; display: block; float: left; position: relative; }
ul li ul { background-color: darkgrey; display: block; position: absolute; top: 3.2em; left: 0; margin: 0; padding: 0; }
ul li ul li { display: block; }
a { color: white; display: block; padding: 1em; }
a:focus,
a:hover{ color: red; }
我稍微更改了标记以确保在父元素和子元素上捕获悬停事件。如果中间有空格,您将触发额外的 mouseleave
事件。在那种情况下它不起作用。因此,语义 HTML 有助于将 position:relative
用于父菜单,将 position: absolute
用于子菜单。另请注意,我添加了 a:hover
以保持类似的行为。
JavaScript
$('ul').on('focusin mouseenter', 'li', function() {
var el = $(this),
panels = $('.panel'),
menu = el.parents('.open'),
menuId = menu.index(),
sub = el.find('ul');
// conditionally hide the submenu when using focus
if (menuId < 0){
panels.addClass('hidden'); // use a filter function to improve it
}
sub.removeClass('hidden');
});
$('ul').on('focusout mouseleave', 'li', function(ev){
var el = $(this),
itemId = el.index(),
menu = el.parents('.open'),
menuId = menu.index(),
sub = el.find('ul');
// conditionally hide the submenu when using the mouse
if (menuId < 0 && ev.type !== 'focusout'){
sub.addClass('hidden');
}
});
在 JavaScript 部分,我确定您希望保留鼠标功能。在这种情况下,我们可以使用 focusin mouseenter
和 focusout mouseleave
,正如 Pomax 之前建议的那样。我使用的技巧是捕获事件类型以查看我们使用的是键盘还是鼠标。两个事件绑定(bind)的行为略有不同,从而解决了这个特定问题。 jQuery 对象的 index()
可以帮助确定您是在子菜单还是菜单项上。当找不到索引或索引为 -1
时执行不同操作的简单技巧。
我还没有做的是检查它是否与跨浏览器兼容。同样在 javascript 部分,我相信有些事件被触发得太频繁了。在这种情况下使用委托(delegate) on()
可能不是一个好主意,除非您的列表项是动态添加到页面的。
希望对您有所帮助,祝您微调好运!
关于javascript - 当焦点离开 div 中的所有子链接时,触发事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20405879/
var newRight; if(either.isRight()) { newRight = either.getOrElse(() => throw UnimplementedError())
我正在做一个登录字段。它由 UITextfields 和一个弹出选择器 Controller 的按钮组成。单击按钮以显示按钮弹出时,我想删除/保留/取消编辑文本字段。 我试过: [发件人resignF
我试图在用户关闭选项卡或转到另一个选项卡(如 facebook、gmail、GoDaddy 和其他选项卡)之前显示确认弹窗。 我的代码适用于 Firefox,但不适用于 chrome、safari 等
我无法退出代码中的 While 循环和方法。用户可以选择输入 1 或 2 和 0 来取消(离开菜单和方法)。但是就像现在的代码一样,我猜 Switch 中的默认选项会阻止它离开 While 循环!?我
所以我目前正在学习这个关于 PHP 表单的教程,并且我把它放到了这个页面的底部,它说到目前为止要测试表单,http://www.webreference.com/programming/php/sea
我正在开发一个可以让用户登录 2 个 xmpprooms 的应用程序,但同时只能登录 2 个,所以如果他想连接到另一个,我必须断开他与前一个的连接并连接到下一个。使用此代码: 这是我离开房间的方式:
我目前正在 React 应用程序中使用我的网络摄像头拍照。然而,当我离开组件时,绿灯继续亮着,我似乎无法关闭我的网络摄像头。这是我用来使用网络摄像头的代码。 navigator.webkitGet
实际到达很简单,标签进入接收器天线范围,但是偏离是造成问题的原因。 首先,我们了解一些有关设置的信息。 标签: 它们以433Mhz的速度工作,每1.5秒钟发送一次“心跳”,移动时进入传输突发模式,这种
这是我的第二个问题(已经回答):Creating SharedPreferences object inside Fragment . 在弄清楚如何在静态 Fragment 类中创建 SharedPr
我需要离开 Firebase 中的一个项目,但我没有选择离开该项目,因为我没有该项目的所有权。我是该项目的成员,需要离开该项目,因为该项目的开发已在几个月前停止 有什么选择可以做到这一点吗?我还需要从
我希望在以下情况下触发我的 javascript: 当打开多个 IE 选项卡时,当前 IE 选项卡将被切换。 当前 IE 选项卡关闭时。 我不希望我的 JS 代码被页内弹出对话框触发。 当整个 IE
我在 socket.io wiki 上查看如何使用房间,但加入和离开不起作用,我想知道他们是否可能更改了一些内容但没有机会更新 wiki? socket.join("room-"+data.meid)
在此 Activity 中我使用振动,因此由用户选择按照振动节奏移动的球,但是当我想向后返回屏幕时,即返回到MainActivity,应用程序继续振动而不停止。这是我的代码,我已经尝试了所有方法,但无
我正在构建一个用于学习 SwiftUI 的小型待办事项应用程序,我可以在 CoreData 中创建一个任务列表并将它们标记为完成,这会将 isComplete 设置为 true 并将图像从空圆圈更改为
我在 if 语句中有一个 if 语句。 如果第二个if语句中的条件返回false,我要转到第一个else因为它会自动设置我的验证控件。 希望你明白 if (page.isvalid() ) {
我正在尝试找到一种方法,让我的变量在应用程序的整个生命周期中保持不变。我设计该应用程序的方式是用户单击类(class)并提交成绩。我想要的是应用程序在 Activity 结束后存储成绩。当用户退出屏幕
首先你应该知道,允许玩家玩的区域是一个正方形,即320x320,位于屏幕中央。这个 320x320 的正方形是一个 5x5 的网格 [每个图 block 64x64],并且玩家始终位于网格图 bloc
我的应用程序在离开 UIViewController 时崩溃并出现以下错误。 [FeedSingleViewCell retain]: message sent to deallocated inst
使用此代码允许媒体播放器在全屏时横向旋转(应用程序不支持): // handle orientation for the device func application (_ application:
好的。查看了可能的答案,但我在这里没有看到我的问题。 我有一个相当标准的 GCD 重复计时器: class RepeatingGCDTimer { /// This holds our cur
我是一名优秀的程序员,十分优秀!