一種清除：在觸摸屏上的下拉菜單中懸停的方法？

我有一個非常標準的CSS下拉菜單，使用：懸停來顯示子元素，並使用Doubletap插件來捕獲和清除觸摸事件，以便在觸摸設備上顯示子菜單元素。一種清除：在觸摸屏上的下拉菜單中懸停的方法？

現在，我希望能夠在用戶點擊十字時「關閉」打開的菜單項。到目前爲止，我擁有的是：

Cross默認爲隱藏。
交變時，家長裏可見：徘徊

但我需要的是也：

當交叉被竊聽，父：懸停狀態被清除（返回菜單到初始狀態）。

<ul id="main-menu"> 
      <li class="parent" aria-haspopup="true"><a href="#">Item One</a> 
       <span class="tapclose">X</span> 
       <!-- sub-menu --> 
      </li> 
      <li class="parent" aria-haspopup="true"><a href="#">Item Two</a> 
       <span class="tapclose">X</span> 
       <!-- sub-menu --> 
      </li> 
    </ul>

什麼是做到這一點的最好方法是什麼？菜單需要在基於觸摸和鼠標的接口上工作。我開放給JQuery，CSS &標記解決方案。

來源

2014-03-14 Ila

我不是，我真的可以回答，但我們使用'：hover'，'：focus'和'：active'所以你可以將鼠標，鍵盤選項卡，並觸動我們菜單。 –

此問題之前已被問到：http://stackoverflow.com/questions/14068773/clear-css-menu-hover-state-on-click-page-loaded-via-ajax –

這樣做的最佳方法是什麼？

這是一個很難回答的問題，因爲雖然有幾種方法可以實現你正在嘗試做每一個方法都有其優點和缺點，它會永遠開放到基於輿論爭論。所以我敢說沒有最好的方法來做到這一點，但肯定有些方法可能更合適或更清潔

我個人認爲jQuery使一切都如此簡單，並且很好的探索。但是，我不認爲這是最好的方式。其實，我放在一起，展示了其潛力，與這些類型的菜單很好處理這個JS Fiddler

當我使用這個HTML結構簡約的例子...

<nav> 
    <div class="l1">Item 1 
     <div class="l2"> 
      <div>Sub Item 1.1</div> 
      <div>Sub Item 1.2</div> 
     </div> 
    </div> 
    <div class="l1">Item 2 
     <div class="l2"> 
      <div>Sub Item 1.1</div> 
      <div>Sub Item 1.2</div> 
     </div> 
    </div> 
    <div class="l1">Item 3 
     <div class="l2"> 
      <div>Sub Item 1.1</div> 
      <div>Sub Item 1.2</div> 
     </div> 
    </div> 
    <div class="l1">Item 4 
     <div class="l2"> 
      <div>Sub Item 1.1</div> 
      <div>Sub Item 1.2</div> 
     </div> 
    </div> 
</nav>

考慮使用ul和li元素代替。我也是用這個樣式表...

nav{ 
    display:block; 
    height:25px; 
    padding:10px 50px; 
    background-color:black; 
    color:yellow; 
    font-weight:bold; 
} 
nav div.l1{ 
    margin-right:20px; 
    display:inline-block; 
    zoom:1; 
    *display:inline; 
} 
nav div.l2{ 
    display:none; 
    background-color:yellow; 
    color:black; 
    position:absolute; 
    margin-top:16px; 
    z-index:1; 
    padding:20px 10px; 
}

最後這個jQuery ...

$(function(){ 
    $('div.l1').click(toggleSubItems); 
}); 

function toggleSubItems(){ 
    $('div.l2').not($(this).children('div.l2')).hide(); 
    $(this).children('div.l2').toggle(400); 
}

請注意，所有的顧慮都很好地分離...的JavaScript，HTML，CSS。但是，再次以此爲例展示其擴展潛力，而不是作爲項目的模板。

希望它可以幫助

來源

2014-03-14 01:29:13 Leo

一種清除：在觸摸屏上的下拉菜單中懸停的方法？

回答

相關問題