当前位置: 首页 > 面试题库 >

检测下拉导航是否会在屏幕外消失并重新定位

何博涛
2023-03-14
问题内容

我已经有了典型的下拉导航,并且试图确保下拉菜单链接始终可访问和可见:

<li><a href="#">Link 1</a>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
</li>
<li><a href="#">Link 2</a>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
</li>
<!-- etc. -->
</ul>

CSS确实没有什么特别的(删除了颜色和背景):

.dropdown,
.dropdown li,
.dropdown ul {
    list-style:none;
    margin:0;
    padding:0;
}
.dropdown {
    position:relative;
    z-index:10000;
    float:left;
    width:100%;
}
.dropdown ul {
    position:absolute;
    top:100%;
    visibility:hidden;
    display:none;
    width:16em;
}
.dropdown ul ul {
    top:0;
    left:100%;
}
.dropdown li {
    position:relative;
    float:left;
}
.dropdown li:hover{
    z-index:910;
}
.dropdown ul:hover,
.dropdown li:hover > ul,
.dropdown a:hover + ul,
.dropdown a:focus + ul {
    visibility:visible;
    display:block;
}
.dropdown a {
    display:block;
    padding:1em 2em;
}
.dropdown ul li {
    width:100%;
}

顶级链接数量未知(由用户创建)。我遇到的问题是,如果顶层链接距离右侧太远,有时下拉菜单(位于右侧)将不在屏幕上。我添加了以下CSS来补偿:

.dropdown > li:last-child ul { /* ...or use a class on the last link for IE */
    right:0;
}

现在,最后一个位于屏幕左侧,而不是离开屏幕,这很不错,但是存在一些问题:

  1. 对于上一个链接,我并不总是需要这些样式,因为它并不总是在屏幕的边缘(例如,只有3个链接)。
  2. 调整浏览器窗口的大小后,链接堆栈会彼此重叠(通过设计)。有时,序列中间的链接最终会出现在右侧,并且其下拉菜单会被切断。
  3. 有时,“倒数第二个”链接的菜单也会超出边界。

调整此演示中的面板大小,以了解我的意思 (红色区域被视为“屏幕外”)

多年来,我一直在努力解决这个令人讨厌的常见问题,但从未找到令人满意的解决方案。有什么方法可以检查下拉菜单是否会退出屏幕,如果可以,添加/删除class名称或其他名称,以便可以使用CSS在屏幕上显示?

我可能会使用的一个提示是,如果菜单 确实
不在屏幕上,它将始终在窗口底部产生一个垂直滚动条,但是我不确定如何使用该知识。对于有关检测垂直滚动条的[问题,]我尝试了接受的答案,但是由于某种原因,它始终会返回true,并始终添加“
edge”类(也许在计时方面存在问题?):

$(".dropdown li").on('mouseenter mouseleave', function (e) {

    // Get the computed style of the body element
    var cStyle = document.body.currentStyle||window.getComputedStyle(document.body, "");

    // Check the overflow and overflowY properties for "auto" and "visible" values
    hasVScroll = cStyle.overflow == "visible" 
             || cStyle.overflowY == "visible"
             || (hasVScroll && cStyle.overflow == "auto")
             || (hasVScroll && cStyle.overflowY == "auto");

    if (hasVScroll) {
        $(this).addClass('edge');
    } else {
        $(this).removeClass('edge');
    }
});​

使用javascript进行演示:http :
//jsfiddle.net/G7qfq/2/

真的,我什至不希望看到一瞬间的垂直滚动条,所以我不确定那是要走的路,再加上可能会出现误报(滚动条由于其他原因)。

我在 这个答案中也尝试了该解决方案,但我对此不太了解,因此无法正常工作: http

//jsfiddle.net/G7qfq/3/

$(“.dropdown li”).on(‘mouseenter mouseleave’, function (e) {

var elm = $('ul:first', this);
var off = elm .offset();
var t = off.top;
var l = off.left;
var h = elm.height();
var w = elm.width();
var docH = $(window).height();
var docW = $(window).width();

var isEntirelyVisible = (t > 0 && l > 0 && t + h < docH && l+ w < docW);

if ( ! isEntirelyVisible ) {
    $(this).addClass('edge');
} else {
    $(this).removeClass('edge');
}

});​

我认为该解决方案需要javascript,并且我正在使用jQuery,但是我不知道如何解决该问题。有任何想法吗?


问题答案:

我想你快到了…

您实际上应该只对宽度所涉及的计算感兴趣。如果下拉元素的宽度和该元素的偏移量大于容器的宽度,则需要切换菜单。

$(function () {
    $(".dropdown li").on('mouseenter mouseleave', function (e) {
        if ($('ul', this).length) {
            var elm = $('ul:first', this);
            var off = elm.offset();
            var l = off.left;
            var w = elm.width();
            var docH = $(".container").height();
            var docW = $(".container").width();

            var isEntirelyVisible = (l + w <= docW);

            if (!isEntirelyVisible) {
                $(this).addClass('edge');
            } else {
                $(this).removeClass('edge');
            }
        }
    });
});


 类似资料:
  • 最近,我一直在构建一个应用程序,在JFrame上绘制图像,一切都很好,但是当窗口离开屏幕时,已经绘制的图像消失了,我一直在想是否有办法避免这种情况?谢谢 导入java。awt。;导入java。awt。事件 公共类Pokemoneur扩展了JFrame,实现了AdjustmentListener、ActionListener、MouseListener和Runnable{ }问题是,当用户在屏幕上画

  • 问题内容: 我拼命地寻找一种可能性,以检查ReactNavigation中是否存在先前的屏幕。 使用收益,如果没有以前的路由存在,但我不能使用它,因为如果以前的路由存在我重定向。 是否可以检查我是否打开了该应用程序,而不是从另一个屏幕导航到主屏幕? 谢谢。我没有使用Redux。这样会使这些东西变得更容易,但是我现在想避免使用它。 问题答案: 可能的解决方案(不确定是否是最好的解决方案)是在上一个屏

  • 我想实现twitter引导下拉菜单,这里是我的代码: null 下拉列表工作良好,我的下拉列表被放置在屏幕的右边缘旁边,当我单击下拉列表切换时,列表就会出现在屏幕之外。屏幕上看起来是这样的: 我该怎么修好它?

  • 我想重新绘制我的屏幕。到目前为止,它所做的只是在第一个屏幕上的头部应该在的地方显示一个点。这很好,但是我在代码中写了我想每秒将头部向下移动10个像素。我正在打印头部应该在的位置,在命令提示符中它显示y值确实在增加。但是在我的屏幕上,头部没有移动。 我尝试过使用revalidate方法,尝试扩展canvas类而不是jframe,我尝试过只为paint方法使用不同的类,我尝试过用paintCompon

  • 下拉菜单仍然是Web上流行的界面元素,虽然有一些纯Javascript 解决方案,但在禁用Javascript 的浏览器下,它却无能为力。因此,纯CSS的下拉菜单才是最好的选择。 这种技术及其简单,只需把子导航嵌套在无序列表中,并让子导航默认隐藏,然后当鼠标悬停或点击父列表时,再让它显示出来。 本节,在上一节主导航的基础上,添加子导航,来演示下拉导航的制作方法。主导航的样式保持不变,这里只介绍子导

  • 问题内容: 如何从一个活动屏幕导航到另一个活动屏幕?在第一个屏幕中,我有一个按钮,如果我单击该按钮,则必须移至另一个“活动”屏幕。 问题答案: