Question

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

Answer 1

有一个纯CSS解决方案。在您当前的规则中添加规则＆quot;底部：100％;＆＃39;。（见下文）

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

很酷，对吧？

这可能是this question的副本。

Answer 2

工作解决方案：http://jsfiddle.net/avi_sagi/5dzme/1/

额外的CSS：

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

看看这是做什么的，它将每个列表项目拉高两倍的高度，从而将顺序从上下调整为自下而上所以你得到你想要的东西。

希望这有帮助！

Answer 3

<强> 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将计算div的当前位置和菜单的高度，如果div与页面底部之间的空间小于下拉高度，则下拉列表将显示在上方。

以下是带有下拉列表的演示（div {bottom: 40px;}） http://jsfiddle.net/wxA2u/

这是演示文稿，下面是下拉列表（div {top: 40px;}） http://jsfiddle.net/wxA2u/1/

Answer 4

此处我已根据当前窗口大小更新了最高值..请检查此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;
}

这是我用来计算最高值的脚本..

下拉菜单为Selectbox

4 个答案: