Question

我正在使用下拉菜单中的列表项，最初使用:hover。适用于桌面上的鼠标悬停，但不适用于触摸屏水龙头。首先使用JavaScript here（由@ z0r引用）模拟悬停状态的建议：

$('body').bind('touchstart', function() {});

然后，所有:hover个选择器都被复制为:active，例如：

ul.Menu li:hover>ul,  
ul.Menu li:active>ul {display:block;}

虽然子菜单在iPhone（Safari）上显示菜单，但无法选择：子菜单消失。这是一个小提琴：http://jsfiddle.net/7jfo9x8h/2。

我不确定问题是否是浏览器/操作系统特定的，但我认为它适用于Android / Chrome。任何解决方案都需要在iPhone上测试（我没有）。提前谢谢！

第二个问：我在css中使用cursor:pointer来显示MENU周围的框是可点击的[感谢@DOC ASAREL，很棒的提示]。但是下面的html和css显示在小提琴中（更新的代码：http://jsfiddle.net/7jfo9x8h/9），只有文本可点击/可以浏览。需要什么css mod才能使整个框处于活动状态（点击和悬停）？非常感谢。

<ul class="Menu">
  <li>MENU
   <ul>
    <li><a href="...

Answer 1

此解决方案不再需要:active行。他们无论如何只能解决问题的一半。

＆＃13;

$('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()
})

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

您需要one触发器，因为您需要更改同一元素上click上发生的事件。这就是你需要的吗？％）P

第二个问题

您必须将click事件添加到ul.Menu。并将position:relative添加到ul.Menu。

喜欢FIDDLE：http://jsfiddle.net/7jfo9x8h/10/。

将项目列为下拉菜单：在Safari上失败

1 个答案: