我正在为下拉菜单使用列表项,最初使用 :hover
。适用于桌面上的鼠标悬停,但不适用于触摸屏点击。首次实现建议以使用 JavaScript 模拟悬停状态 here (由@z0r 引用):
$('body').bind('touchstart', function() {});
然后,所有 :hover
选择器都被复制为 :active
,例如:
ul.Menu li:hover>ul,
ul.Menu li:active>ul {display:block;}
虽然子菜单在 iPhone (Safari) 上通过菜单点击显示,但无法选择:子菜单消失。这是一个 fiddle :http://jsfiddle.net/7jfo9x8h/2 .
我不确定问题是否特定于浏览器/操作系统,但我认为它适用于 Android/Chrome。任何解决方案都需要在 iPhone 上进行测试(我没有)。提前致谢!
第二个问题:我在 css 中使用 cursor:pointer
来显示 MENU 周围的框是可点击的 [感谢@DOC ASAREL,很棒的提示]。但是使用下面的 html 和 fiddle 中显示的 css(更新代码:http://jsfiddle.net/7jfo9x8h/9),只有文本是可点击/可悬停的。需要什么 css mods 才能使整个框处于事件状态(单击并悬停)?非常感谢。
<ul class="Menu">
<li>MENU
<ul>
<li><a href="...
最佳答案
此解决方案不再需要 :active
行。无论如何,他们只解决了一半的问题。
$('body').bind('touchstart', function() {});
var down = function() {
$('ul.Menu li ul').slideDown(100)
$('ul.Menu li').one('click', up)
}
var up = function() {
$('ul.Menu li ul').slideUp(100)
$('ul.Menu li').one('click', down)
}
$('ul.Menu li').one('click', function() {
down()
})
/* The css copied from another site; efforts to prune items may have left a few that are unnecessary */
ul.Menu ul{ display:none; }
ul.Menu li:hover>ul,
ul.Menu li:active>ul{ display:block; }
ul.Menu ul {
position: absolute;
left:-1px;top:98%;
}
ul.Menu,ul.Menu ul {
list-style:none;
padding:0px 2px 2px 0px;
background-color:#E3D8E3;
border-width:1px;
border-style:solid;
}
ul.Menu { float: left; }
ul.Menu li{ margin:0px 10px 0px 5px; }
ul.Menu a, ul.Menu li.dis a:hover,
ul.Menu li.dis a:active,
ul.Menu li.sep a:hover,
ul.Menu li.sep a:active {
display:block;
border-width:0px;
padding:4px;
padding-left:5px;
padding-right:0px;
font:bold 15px Trebuchet MS;
color: #050505;
text-decoration:none;
}
ul.Menu ul li { float:none; }
ul.Menu ul a { white-space:nowrap; }
ul.Menu li:hover,
ul.Menu li:active{ position:relative; }
ul.Menu li a:hover,
ul.Menu li a:active{
position:relative;
background-color:#0000FF;
border-color:#665500;
border-style:solid;
font:bold 15px Trebuchet MS;
color: #ffffff;
text-decoration:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--- bootstrap (used for the full version of the site) -->
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<p>
<ul class="Menu">
<li><font style="font-size:20px;">MENU</font>
<ul>
<li><a href="http://cnn.com">Sub 1</a></li>
<li><a href="http://cnn.com">Sub 2</a></li>
<li><a href="http://cnn.com">Sub 3</a></li>
<li><a href="http://cnn.com">Sub 4</a></li>
<li><a href="http://cnn.com">Sub 5</font></a></li>
<li><a href="http://cnn.com">Return Home</a></li>
</ul>
</li>
</ul>
您需要一个one
触发器,因为您需要更改在同一元素上单击
时发生的事件。那是你需要的吗? %)P
第二个问题
您必须将 click
事件添加到 ul.Menu
。并将position:relative
添加到ul.Menu
。
就像在 FIDDLE 中一样:http://jsfiddle.net/7jfo9x8h/10/ .
关于javascript - 将元素列为下拉菜单 : fails on Safari,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32426226/