作爲選擇框的下拉菜單

我試圖設計一個選擇，但放棄了與IE8和Safari的不兼容問題。所以我想使用下拉菜單而不是選擇，然後出現另一個問題。當選擇靠近頁面底部時，選項會顯示在選擇區域上方而不是底部，這是默認選項。我想知道的是，如果任何人有使用jQuery做下拉選項出現在它上面的選擇選項作爲選擇框的下拉菜單

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>Dropdown Menu</title> 
     <meta charset="UTF-8"> 
     <style type="text/css"> 
      * {border: 0; margin: 0; padding: 0;} 

      div { 
       background-color: #09C; 
       width: 200px; 
       line-height: 40px; 
       bottom: 40px; 
       left: 300px; 
       display: block; 
       position: absolute; 
       text-indent: 15px; 
       cursor: pointer; 
      } 

      div span { 
       font-weight: bold; 
       font-family: sans-serif; 
       font-size: 16px; 
       color: #FFF; 
      } 

      div:hover ul {display: block;} 

      div ul { 
       background-color: #0f0; 
       width: 200px; 
       height: 300px; 
       position: absolute; 
       display: none; 
       list-style: none; 
      } 

      div ul li { 
       background-color: #000; 
       width: 200px; 
       line-height: 30px; 
       font-weight: bold; 
       font-family: sans-serif; 
       font-size: 16px; 
       color: #FFF; 
      } 
     </style> 
    </head> 
    <body> 
     <div> 
      <span>Dropdown</span> 
      <ul> 
       <li>Link 01</li> 
       <li>Link 02</li> 
       <li>Link 03</li> 
       <li>Link 04</li> 
       <li>Link 05</li> 
       <li>Link 06</li> 
       <li>Link 07</li> 
       <li>Link 08</li> 
       <li>Link 09</li> 
       <li>Link 10</li> 
      </ul> 
     </div> 
    </body> 
</html>

來源

2014-04-01 Learning

你有一個的jsfiddle？ – pj013

你可以在這裏使用selectmenu jquery插件。 –

@ jp310試試這個http://jsfiddle.net/tL5jn/ –

HTML

<div id="dropdown"> <span>Dropdown</span> 

    <ul> 
     <li>Link 01</li> 
     <li>Link 02</li> 
     <li>Link 03</li> 
     <li>Link 04</li> 
     <li>Link 05</li> 
     <li>Link 06</li> 
    </ul> 
</div>

CSS

* { 
    border: 0; 
    margin: 0; 
    padding: 0; 
} 
div { 
    background-color: #09C; 
    line-height: 40px; 
    bottom: 40px; 
    width: 200px; 
    left: 300px; 
    display: block; 
    position: absolute; 
    text-indent: 15px; 
    cursor: pointer; 
} 
div span { 
    font-weight: bold; 
    font-family: sans-serif; 
    font-size: 16px; 
    color: #FFF; 
} 
div:hover ul { 
    display: block; 
} 
div ul { 
    background-color: #0f0; 
    width: 200px; 
    position: absolute; 
    display: none; 
    list-style: none; 
} 
div ul li { 
    background-color: #000; 
    width: 200px; 
    line-height: 30px; 
    font-weight: bold; 
    font-family: sans-serif; 
    font-size: 16px; 
    color: #FFF; 
}

jQuery的

$(document).ready(function() { 
    var ul_h = $('ul').height(); 
    var dd_h = $('#dropdown').height(); 
    var doc_h = $(document).height(); 
    var offsetTop = $('#dropdown').offset().top; 
    if (doc_h - offsetTop - dd_h < ul_h) { 
     $('#dropdown ul').css('bottom', '100%'); 
    } 
});

這jQuery將計算當前POSITI菜單的div和height，如果div和頁面底部之間的距離小於下拉高度，則會在上面顯示下拉菜單。

這裏是演示用下拉上述（div {bottom: 40px;}） http://jsfiddle.net/wxA2u/

，這裏是演示下面（div {top: 40px;}）下拉 http://jsfiddle.net/wxA2u/1/

來源

2014-04-01 19:15:24

@MiljanPuzovićPerfect，正是我想要的。我非常感謝你的幫助。我特別感謝你和所有回覆的人。 – Learning

@學習，不客氣。如果這是正確的答案，請接受它（綠色檢查標誌）。你可以投票了，也:) –

對不起，我的聲望是12，我不能投票:( – Learning

有一個純CSS解決方案的解決方案。在你當前的規則中添加規則'bottom：100％;'。（見下）

div ul { 
    background-color: #0f0; 
    width: 200px; 
    height: 300px; 
    position: absolute; 
    display: none; 
    list-style: none; 
    bottom: 100%; /* <- add this */ 
}

很酷，對嗎？

這是this question的可能重複。

來源

2014-04-01 18:43:02 pizzasynthesis

@ pizzasynthesis-純粹的CSS也不錯，但在這種特殊情況下並不能解決我的問題，但不幸的是，謝謝你的回覆。 – Learning

工作液：http://jsfiddle.net/avi_sagi/5dzme/1/

額外的CSS：

div ul{ 
margin-top:-10px; 
} 
div ul li{ 
margin-top:-60px; 
}

看看這樣做是它拉各列表項增長一倍的高度，以便依次從上下顛倒，以自下而上頂部所以你得到你想要的。

希望這會有所幫助！

來源

2014-04-01 18:46:41

Sagi_Avinash_Varma-我沒有想到這個解決方案，簡單而高效。 – Learning

在這裏，我已經更新基於當前窗口大小頂部值..請檢查該Fiddle ...這可能幫助你..

腳本：

function calculateTop(element, popup) { 
    var height = element.outerHeight(), 
    popupHeight = popup.height(), 
    pos = element.offset(), 
    top = pos.top, bottom = $(window).height() - (top + height); 

    if (bottom > popupHeight || top < popupHeight) 
     return height; 
    else 
     return -popupHeight; 
}

這裏是我用來計算頂部值腳本..

來源

2014-04-01 19:38:54 Soundar

@SoundarR謝謝你，因爲我正在學習，你的腳本將在我的學習非常有用。 – Learning

作爲選擇框的下拉菜單

回答

相關問題