作为选择框的下拉菜单

我试图设计一个选择，但放弃了与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

作为选择框的下拉菜单

回答

相关问题