Question

我需要你的帮助，

我认为我的自制定制UL LI CSS菜单会很好用，除了一个小细节。当用户点击下拉列表时，下拉列表似乎将所有其他HTML元素移动到底部。

这是前后pic（由黑线分隔）：

以下是有问题的HTML和CSS：

<!DOCTYPE html>

<html>

<head>

<script src="jquery-1.11.3.min.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
* {
    font-family: Segoe UI;
    font-size: 9pt;
}
.select {
    background: url(arrow.png) no-repeat scroll right top;
    border: 1px solid rgb(170,170,170);
    width: 180px;
    padding: 3px;
}
.select:hover {
    cursor: pointer;
    border-color: rgb(112,112,112);
}
.select ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
}
.select ul li {
    display: none;
    padding: 1px;
    font-weight: normal;
}
.select ul li:hover {
    background: rgb(112,146,190);
    color: #FFF;
}
.selected {
    background: rgb(195,195,195);
}
</style>

<script type="text/javascript">

window.onload = function() {

    $(document).bind('click', function(e) {
        var $clicked = $(e.target);
        if (!$clicked.hasClass("select")) {
            $(this).find('ul li').hide()
        }
    });

    $(".select").click(function () {
        $(this).find('ul li').toggle();
    });

    $(".select ul li").click(function(e) {

        if (e.ctrlKey) {

            e.stopPropagation()

            if ($(this).hasClass('selected')) { $(this).removeClass('selected') }
            else {
                $(this).addClass('selected');
            }

            var c = $(this).parent().find("li.selected").length

            $(this).closest("div").contents().first().replaceWith((c > 1)?"(" +c+ ")":$(this).text())

        }
        else {
            $(this).closest("div").contents().first().replaceWith($(this).text());
            var id = $(this).closest('[id]').attr('id');

            $(this).closest('.select').find("ul li").removeClass('selected');
            $(this).addClass('selected');
        }

    }); 
}




</script>

</head>

<body>
Numbers
<div class="select" id="reqtype">&nbsp;
    <ul>
        <li>&nbsp;</li>
        <li data-val="Column1">Column1</li>
        <li data-val="Column2">Column2</li>
        <li data-val="Column3">Column3</li>
    </ul>
</div>
<br><br>
Letters
<div class="select" id="letters">&nbsp;
    <ul>
        <li>&nbsp;</li>
        <li>abcd</li>
        <li>efgh</li>
        <li>ijkl</li>
    </ul>
</div>
<br><br>
Fruits
<div class="select" id="fruits">&nbsp;
    <ul>
        <li>&nbsp;</li>
        <li>apples</li>
        <li>bananas</li>
        <li>oranges</li>
    </ul>
</div>

</body>

</html>

Answer 1

这是设置它的快速方法。在您的position: relative上添加.select

.select {
    background: url(arrow.png) no-repeat scroll right top;
    border: 1px solid rgb(170,170,170);
    width: 180px;
    padding: 3px;
    position: relative;
}

然后像这样更新你的第一个下拉菜单：

#reqtype ul {
    position: absolute;
    top: 23px;
    width: 188px;
    left: -1px; /*this is to address the 1px border*/
    background: red;
    z-index: 10
}

说实话，现在的代码似乎只是有一个基本的下拉菜单。我相信有更简单的方法可以用来实现你想要实现的目标。

Heres a working fiddle。希望有所帮助

UL LI Drop Down菜单向下推送其他html内容

1 个答案: