將項目列為下拉菜單：在Safari上失敗

Question

我正在使用下拉菜單的列表項，最初使用:hover 。 與台式機上的鼠標懸停效果很好，但與觸摸屏點擊不兼容。 此處首先實現了使用JavaScript模擬懸停狀態的建議（由@ 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 。

我不確定該問題是否是特定於瀏覽器/ OS的，但我認為它可以在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行。 無論如何，他們只能解決一半的問題。

 $('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觸發器，因為您需要更改click同一元素時發生的事件。 那是你需要的嗎？ ％）P

第二個問題

您必須將click事件添加到ul.Menu 。 並添加position:relative對於ul.Menu

就像在FIDDLE中一樣： http : //jsfiddle.net/7jfo9x8h/10/ 。