Question

我创建了一个下拉菜单，当您单击某个元素时会显示该下拉菜单。它在大多数情况下都可以正常工作，但如果下拉列表（df.repartition(1).write.format('com.databricks.spark.csv').option("header","true").mode("overwrite").save("/user/test")项）的内容太多并且下拉列表的容器位于页面底部附近，则唯一的例外是，它导致窗口扩展，您必须向下滚动以查看其其余项目。

对此，我的解决方案是尝试通过检测高度是否超出容器，使容器的位置显示在容器上方而不是下方。到目前为止，我一直没有成功，因为它始终位于容器上方，即使它没有超过窗口高度也是如此。

HTML：

li

jQuery：

<div class="selector">
    <div class="title" data-action="open">Open</div>
    <div class="container">
        <ul class="itemList">
            <li>Hello</li>
            <li>Hello</li>
            <li>Hello</li>
            <li>Hello</li>
            <li>Hello</li>
            <li>Hello</li>
        </ul>
    </div>
</div>

还有我的LESS（如果需要）

$(document).ready(function() {
    $(this).on("click", ".selector > *[data-action='open']", function() {
        const selector = $(this).parent(".selector");
        selector.find(".title").toggleClass("selected");
        selector.find(".container").toggle();
        if($(window).height() > selector.find(".container").height()) {
            selector.find(".container").css("top", ("-" + selector.find(".container").height() - 20));
        }
    });
});

非常感谢您的帮助！

Answer 1

您用来检查窗口高度和列表高度的条件错误。

尝试以下一项。此检查的可用高度小于列表要求的高度，然后将显示在顶部。还要检查上方的可用高度应大于列表所需的高度，否则，它将增加页面高度，列表将位于下方，并显示滚动条，如以前一样。

我修改了代码。您可以添加/删除'<br/>'/'<li>Hello</li>'以测试各种情况。

 $(document).ready(function() {
        $(this).on("click", ".selector > *[data-action='open']", function() {
            const selector = $(this).parent(".selector");
            selector.find(".title").toggleClass("selected");
            selector.find(".container").toggle();
            var windowHeight = $(window).height();
            var titleOffsetTop = selector.find(".title").offset().top;
            var titleHeight = selector.find(".title").height();
            var containerHeight = selector.find(".container").height();
            debugger;
            if ( windowHeight < ( titleOffsetTop + titleHeight + containerHeight) &&  containerHeight < titleOffsetTop ){
                selector.find(".container").css("top", (-containerHeight-titleHeight) );
            } else {
    			    selector.find(".container").css("top", titleHeight);
    		    }
        });
    });

.selector {
    width: 100%;
    position: relative;
}
    .selector  .container {
        display: none;
        background: #FFF;
        position:absolute;
        z-index:2;
        right:0;
        width:100%;
        top: 50px;
        max-height:500px;
        overflow-y: auto;
        overflow-x:hidden;
       }

    .selector  .container  .itemList {
            margin: 0 -12px;
            padding: 12px;
}
      .selector  .container  .itemList li {
                padding: 12px 18px;
                cursor: pointer;
                color: @body-text-color-secondary;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div class="selector">
    <div class="title" data-action="open">Open</div>
    <div class="container">
        <ul class="itemList">
            <li>Hello</li>
            <li>Hello</li>
            <li>Hello</li>
            <li>Hello</li>
            <li>Hello</li>
            <li>Hello</li>
        </ul>
    </div>
</div>

如果下拉式选单容器超过视窗高度，请移动它

1 个答案: