我有一个经典的CSS下拉菜单,使用CSS hover选择器切换到"display:block;"
为了与触摸设备配合使用,我添加了这个脚本:
$(document).ready(function () {
$("div.menuHead").click(function () {
//Toggle the menu but don't include it in the hide selector using .not()
$(this).siblings("div.menu").toggle();
$("div.menuHead").not($(this)).siblings("div.menu").hide();
});
});
在桌面设备上,悬停下拉菜单仍然有效,而在触摸设备上可以点击菜单。但是,如果桌面用户不小心用鼠标点击了菜单,它会起作用,但会完全禁用所有菜单的悬停效果。此时只有点击才有效。
你有什么想法?我已经尝试彻底禁用CSS悬停属性,并使用jQuery处理所有mouseover和mouseout事件,但是在iOS上点击会立即触发mouseover和click事件,非常快地打开-关闭菜单,所以它无法正常工作。
HTML结构:
<div class="vectorMenu">
<div class="menuHead">Menu Title</div>
<div class="menu">
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</div>
</div>
在CSS中,我设置了以下内容:
div.vectorMenu div.menu {
display: none;
}
div.vectorMenu:hover div.menu {
display: block;
}
感谢您的来信,
Etienne