jquery - 自定义选择-溢出隐藏问题

Question

我已经设法创建了一个非常好的自定义选择，它几乎在所有意义上都有效(JS 需要调整/优化)但是我在复制实际选择元素方面遇到的一个问题是设置相对父容器时到溢出:隐藏；。逻辑告诉我，标准 HTML 元素是特殊的，很可能已经设置了覆盖 CSS 选项的方法，但是我想知道是否有某种形式的 hack 允许我用我的自定义选择列表复制它。

编辑我需要的解决方案是允许选择显示在父元素之外 WITH overflow hidden set on the parent element.

这是 fiddle :http://jsfiddle.net/8Jfjq/

HTML

<div style="height: 50px; width: 100%: float: left; background: red; overflow: hidden;">
    <div class="customSelect" data-auto-submit="no" style="float: left; margin-right: 20px; z-index: 1000;">
        <input class="customSelectInput" type="hidden" name="category"></input>
        <p class="customSelectText"></p>

        <ul class="customSelectList" data-open="no">
            <li class="customSelectOption" data-value="1">1</li>
            <li class="customSelectOption" data-value="2">2</li>
            <li class="customSelectOption" data-value="3">3</li>
            <li class="customSelectOption" data-value="4">4</li>
            <li class="customSelectOption" data-value="5">5</li>
        </ul>
    </div>

    <select style="float: left; height: 25px;">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
</div>

jQuery

$(document).ready(function () {
    var custSel = $(".customSelect");

    custSel.each(function () {
        $(this).children(".customSelectList").show();

        var custSelInput = $(this).children(".customSelectInput"),
            custSelText = $(this).children(".customSelectText"),
            custSelList = $(this).children(".customSelectList"),
            custSelOption = custSelList.children(".customSelectOption"),
            selectedOpt = custSelList.children("[data-selected=\"true\"]"),
            findSelected = selectedOpt.length,
            biggestWidth = 0;

        custSelOption.each(function () {
            $(this).parent().siblings(".customSelectText").text($(this).text());
            if ($(this).width() > biggestWidth) {
                biggestWidth = $(this).parent().parent().width();
            }
        });

        if (findSelected == 0) {
            custSelList.children(".customSelectOption:first-child").attr("data-selected", "true");
            selectedOpt = custSelList.children(".customSelectOption:first-child");
        }

        if (custSelList.height() > "200") {
            custSelList.css({
                height: "200px",
                "overflow-y": "scroll"
            });
        }

        custSelInput.val(selectedOpt.attr("data-value"));
        custSelText.text(selectedOpt.text());
        $(this).width(biggestWidth);
        custSelList.hide();
    });

    $(document).click(function (e) {
        if (e.target != "customSelect") {
            $(".customSelectList").attr("data-open", "no");
            $(".customSelectList").hide();
        }
    });

    $(".customSelectText").click(function (e) {
        e.stopPropagation();
        if ($(this).siblings(".customSelectList").attr("data-open") == "yes") {
            $(this).siblings(".customSelectList").hide();
            $(this).siblings(".customSelectList").attr("data-open", "no");
        } else {
            $(".customSelectList").each(function () {
                $(this).attr("data-open", "no");
                $(this).hide();
            });

            $(this).siblings(".customSelectList").show();
            $(this).siblings(".customSelectList").attr("data-open", "yes");
            $(this).siblings(".customSelectList").children("[data-selected=\"true\"]").css({
                background: "RGB(20, 100, 150)",
                color: "RGB(255, 255, 255)"
            });
        }
    });

    $(".customSelectList").hover(
        function () {
            $(this).children("[data-selected=\"true\"]").css({
                background: "RGB(255, 255, 255)",
                color: "RGB(0, 0, 0)"
            });

            $(this).children("[data-selected=\"true\"]").hover(
                function () {
                    $(this).css({
                        background: "RGB(20, 100, 150)",
                        color: "RGB(255, 255, 255)"
                    });
                },
                function () {
                    $(this).css({
                        background: "RGB(255, 255, 255)",
                        color: "RGB(0, 0, 0)"
                    });
                }
            );
        },
        function () {
            $(this).children("[data-selected=\"true\"]").css({
                background: "RGB(20, 100, 150)",
                color: "RGB(255, 255, 255)"
            });
        }
    );

    $(".customSelectOption").click(function () {
        $(this).parent().siblings(".customSelectText").text($(this).text());
        $(this).parent().siblings("input").attr("value", $(this).attr("data-value"));
        $(this).siblings("[data-selected=\"true\"]").removeAttr("data-selected");
        $(this).attr("data-selected", "true");
        if ($(this).parent().parent(".customSelect").attr("data-auto-submit") == "yes") {
            $(this).parent().parent().parent("form").submit();
        }
    });
});

CSS

* {
    color: RGB(0, 0, 0);
    font-family: Arial;
    font-size: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

body {
    padding: 5px;
}

select {
    border: 1px solid RGB(150, 150, 150);
    box-sizing: border-box;
        -moz-box-sizing: border-box;
    height: 25px;
    padding: 2px;
    width: 50px;
}

.customSelect {
    background: RGB(255, 255, 255);
    float: left;
    position: relative;
    z-index: 10;
}

.customSelectText {
    background: RGB(255, 255, 255);
    border: 1px solid RGB(150, 150, 150);
    box-sizing: border-box;
       -moz-box-sizing: border-box;
    cursor: pointer;
    height: 25px;
    line-height: 23px;
    padding-left: 5px;
    padding-right: 40px;
    position: relative;
    text-transform: capitalize;
    transition: background 400ms;
    user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-user-select: none;
}

.customSelect:hover .customSelectText {
    background: RGBA(200, 230, 240, 0.4);
    box-shadow: inset 0px -12px 2px RGBA(120, 200, 250, 0.2);
}

.customSelectText:after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid RGB(0, 0, 0);
    content:"";
    height: 0;
    position: absolute;
    right: 5px;
    top: 10px;
    width: 0;
}

.customSelectList {
    background: RGB(255, 255, 255);
    border-bottom: 1px solid RGB(150, 150, 150);
    border-left: 1px solid RGB(150, 150, 150);
    border-right: 1px solid RGB(150, 150, 150);
    box-sizing: border-box;
        -moz-box-sizing: border-box;
    display: none;
    overflow: hidden;
    position: absolute;
   width: 100%;
}

.customSelectOption {
    box-sizing: border-box;
        -moz-box-sizing: border-box;
    cursor: default;
    float: left;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    padding-left: 2px;
    text-transform: capitalize;
    width: 100%;
}

.customSelectOption:hover {
    background: RGB(20, 100, 150);
    color: RGB(255, 255, 255);
}

Answer 1

将 position 的值从 relative 更改为 absolute 允许在容器外看到自定义选择，并带有 overflow: hidden; 属性设置给它。但是，这需要您将每个单独选择的坐标设置到您想要的位置。如果可能，最好的解决方案可能是删除 overflow: hidden;。

http://jsfiddle.net/lharby/8Jfjq/2

旧 CSS

.customSelect {
    background: RGB(255, 255, 255);
    float: left;
    position: relative;
    z-index: 10;
}

新 CSS

.customSelect {
    background: RGB(255, 255, 255);
    position: absolute;
    top:10px;
    left:10px;
    z-index: 10;
}