如何凍結在CSS3，Javascript中單擊的下拉菜單？

所以我下面的下拉菜單tutoiral：如何凍結在CSS3，Javascript中單擊的下拉菜單？

http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-drop-down-nav-menu-with-html5-css3-and-jquery/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:%20nettuts%20(NETTUTS)&utm_content=Netvibes

我真正想要做的是類似的東西，但要能夠讓這個當上一個項目的用戶點擊下拉，那麼用戶點擊的內容會突出顯示，即使用戶將鼠標移開，下拉菜單中的項目也會停留在此處，並且不會摺疊以幫助爲用戶提供有關他們所在頁面的參考框架。如果用戶在下拉菜單中選擇另一個選項，則用戶點擊的前一個選項將恢復正常，並且用戶點擊的新項目將突出顯示。

如何做到這一點無論是與jQuery，JavaScript或有沒有辦法只是CSS3和HTML5？

來源

2011-08-14 Rolando

如果我理解正確的話，你想下發生：

噸

第一頁的負荷，所有下拉菜單都崩潰了。
用戶懸停在菜單項上，出現下拉式子菜單
用戶將鼠標懸停在子菜單項上時，它將突出顯示。
用戶單擊子菜單項 - 頁面重新加載。在激活的項目高亮顯示的情況下，新頁面下拉菜單仍然可見。
用戶做步驟1-4，再次爲不同的子菜單項，當頁面重新加載之前的子菜單中倒塌，但新的子菜單將是可見的。

這裏的主要問題是，當用戶點擊某個項目時，頁面是否會重新加載，因爲解決方案會因此而有所不同。

假設頁面將重新加載，那麼你就需要讓這個當頁面重新加載加價看起來是這樣的：

<nav id="topNav"> 
    <ul> 
     <li><a href="#" title="Nav Link 1">Nav Link 1</a></li> 
     <li class="currentParent"><a href="#" title="Nav Link 1">Nav Link 2</a> 
      <ul> 
       <li><a href="#" title="Sub Nav Link 1">Sub Nav Link 1</a></li> 
       <li class="current"><a href="#" title="Sub Nav Link 2">Sub Nav Link 2</a></li> 
       <li><a href="#" title="Sub Nav Link 3">Sub Nav Link 3</a></li> 
       <li><a href="#" title="Sub Nav Link 4">Sub Nav Link 4</a></li> 
       <li class="last"><a href="#" title="Sub Nav Link 5">Sub Nav Link 5</a></li> 
      </ul>   
     </li> 
     <li><a href="#" title="Nav Link 1">Nav Link 3</a></li> 
     <li><a href="#" title="Nav Link 1">Nav Link 4</a></li> 
     <li class="last"><a href="#" title="Nav Link 1">Nav Link 5</a></li> 
    </ul> 
</nav>

而且你需要更改CSS：

nav ul ul a:hover { background-color:#555; }

到：

nav ul ul a:hover, nav ul ul li.current a:hover { background-color:#555; }

和：

.no-cssgradients nav li:hover, .no-js nav li:hover { ... }

到：

.no-cssgradients nav li:hover, .no-cssgradients nav li.currentParent, .no-js nav li:hover, .no-js nav li.currentParent { ... }

，並添加以下行：

nav ul li.currentParent ul { display:block; }

然後在JavaScript的變化：

//show subnav on hover 
$(this).mouseenter(function() { 
    $(this).find("ul").stop(true, true).slideDown(); 
}); 

//hide submenus on exit 
$(this).mouseleave(function() { 
    $(this).find("ul").stop(true, true).slideUp(); 
});

到：

//show subnav on hover 
$(this).mouseenter(function() { 
    if(!$(this).hasClass('currentParent')) { 
     $(this).find("ul").stop(true, true).slideDown(); 
    } 
}); 

//hide submenus on exit 
$(this).mouseleave(function() { 
    if(!$(this).hasClass('currentParent')) { 
     $(this).find("ul").stop(true, true).slideUp(); 
    } 
});

我還沒有實際測試過了，所以我敢肯定，你必須做得比這更得到一個完美的工作解決方案，但我希望你能看到諸如此類的事情，我想在這裏做。

來源

2011-08-14 19:03:46

我認爲你應該使用多選框一些自定義邏輯在一個時間只選擇一個項目。

標記

<select id="mySelectBox" multiple="multiple" size="4"> 
    <option value="Item1">Item1</option> 
    <option value="Item2">Item2</option> 
    <option value="Item3">Item3</option> 
    <option value="Item4">Item4</option> 
</select>

的js

$(function(){ 
    $("#mySelectBox").delegate("option", "click", function(){ 
     $(this).parent().children().attr("selected", false); 
     $(this).attr("selected", true); 
    }); 
});

迴環demo

來源

2011-08-14 17:39:20 ShankarSangoli

如何凍結在CSS3，Javascript中單擊的下拉菜單？

回答

相關問題