javascript - 我的子菜单未在 safari 中显示，但在 chrome 和 firefox 中显示

标签 javascript jquery html css safari

我正在为 my site 制作子菜单栏. 它适用于 chrome 和 firefox，但在 safari 上它就在那里，因为我可以单击子菜单项，但不可见。当有多个子菜单时，我在 chrome 上遇到过类似的问题。我通过固定它并设置顶部和左侧来固定它。

html:

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="index.css">
        <link rel="stylesheet" href="material/material.min.css">
        <link rel="stylesheet" href="menu/menu.css">
        <link rel="stylesheet" href="sidebar/sidebar.css">
        <link rel="stylesheet" href="background/background.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <script src="index.js"></script>
        <script src="material/jquery-3.1.1.min.js"></script>
        <script src="material/material.min.js"></script>
        <script src="background/background.js"></script>
        <script src="sidebar/sidebar.js"></script>
        <script src="menu/menu.js"></script>
        <script src="menu/telMenu.js"></script>
    </head>
    <body>
        <span class="bg-wrapper">
            <span class="bg"></span>
            <span class="bg"></span>
            <span class="bg"></span>
            <span class="bg"></span>
            <span class="bg"></span>
        </span>
        <div class="top">
            <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
                <header class="mdl-layout__header">
                    <div role="button" tabindex="0" class="mdl-layout__drawer-button" onclick="showSidebar()">
                        <i class="material-icons">menu</i>
                    </div>
                    <div class="mdl-layout__header-row">
                        <span class="mdl-layout-title">UnderKoen.nl</span>
                    </div>
                </header>
                <div class="sidebar">
                    <span class="mdl-layout-title">Menu</span>
                    <i class="material-icons closeButton" onclick="hideSidebar()">clear</i>
                    <nav class="mdl-navigation">
                        <a class="mdl-navigation__link" href="">Home</a>
                        <a class="mdl-navigation__link external_link" href="https://school.underkoen.nl" target="_blank">
                            School
                        </a>
                        <a class="mdl-navigation__link external_link" href="https://github.com/UnderKoen" target="_blank">
                            Github
                        </a>
                    </nav>
                </div>
            </div>
            <div class="mdl-layout__header-row"></div>
            <ul class="topnav" id="myTopnav">
                <li><a href="">Home</a></li>
                <li><a href="#.about">About</a></li>
                <li>
                    <a href="#.projects">Projects</a>
                    <div class="drp-down">
                        <div class="menu">
                            <input type="text" placeholder="Search.." class="search"><div class="sub-menu">
                                <a>Java</a>
                                <div class="menu">
                                    <a href="#.rubik">Rubik's Cube</a>
                                    <a href="#.monopoly">Monopoly</a>
                                    <a href="#.discordbot">Discord Bot</a>
                                </div>
                            </div>
                            <div class="sub-menu">
                                <a>Python</a>
                                <div class="menu">
                                    <a href="#.snake">Snake</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <main>
            <div class="fancy"></div>
            <div class="top2"></div>
            <div class="mdl-grid mdl-layout__content mainindex">
                <div class="mdl-card mdl-cell mdl-cell--12-col index" id="about">
                    <span class="title">About</span>
                    <span class="content">

                    </span>
                </div>
                <div class="mdl-card mdl-cell mdl-cell--12-col index" id="projects">
                    <span class="title">Projects</span>
                    <span class="content">
                        <div class="mdl-card mdl-cell mdl-cell--12-col subindex" id="snake">
                            <span class="title">Snake</span>
                            <span class="content">
                                <par>
                                    Dit was het eerst spel wat ik echt heb gemaakt. Het is gemaakt in Python, ben begonnen met het maken van Snake in 2013. Het is gemaakt met PyGame. Heb helaas geen screenshot van het spel meer maar het was ong het standaart Snake spel.
                                </par>
                            </span>
                        </div>
                        <div class="mdl-card mdl-cell mdl-cell--12-col subindex" id="rubik">
                            <span class="title">Rubik's Cube</span>
                            <span class="content">
                                <par>Dit was mijn tweede spel wat ik heb gemaakt. Het was mijn eerst spel wat ik had gemaakt in Java, ik was begonnen met het maken van de Rubik's Cube in de vakantie in 2016. Het is gemaakt met behulp van JavaFx dit is een interface libarie voor Java. In het spel is een grote fout wat komt door een niet handige manier van id's opslaan. tijdens het maken van dit spel heb ik mijn vaardig heden met java enorm vergroot. Hier is de code van het programma: <a href="https://github.com/UnderKoen/Rubik-s-Cube">Github</a></par>
                            </span>
                        </div>
                        <div class="mdl-card mdl-cell mdl-cell--12-col subindex" id="monopoly">
                            <span class="title">Monopoly</span>
                            <span class="content">
                                <par>Dit was mijn eerste spel wat multiplayer zou hebben. Het spel heb ik gemaakt in Java, in het begin van het project werkte ik samen met iemand maar hij had na paar dagen geen zin er om verder te werken dus toen stond ik er alleen voor. Ik had de server kant uiteindelijk af en was bezig met de client. helaas heb ik het spel niet afgemaakt omdat ik geen insperatie had om het spel af te maken. ik denk als me klasgenoot nog hielp dat het ondertussen speelbaar was. De code van het programma staat wel nog online: <a href="https://github.com/UnderKoen/Monopoly">Github</a></par>
                            </span>
                        </div>
                        <div class="mdl-card mdl-cell mdl-cell--12-col subindex" id="discordbot">
                            <span class="title">Discord Bot</span>
                            <span class="content">
                                <par>Dit was een bot die ik had gemaakt voor iemand en nog steeds onderhou. Ik heb deze Bot 4,5 keer geschreven wegens updates en ander bullshit ik begon het te maken in C# Discord.net alleen deze werdt na een tijdje niet meer gesupport dus moest over stappen naar de nieuwe update Discord.net 1.0 hier had ik de bot wel af maar hij crashde steeds dus dacht ik dat ik hem maar opnieuw zou gaan schrijven. dit ging helaas niet heet succesvol en ik stapte halvewegen om naar een Java Libarie JDA hier had ik eerst een hele simple versie geschreven om hem online te hebben en later heb ik het vanaf de handlers af zelf gemaakt. De code van de <a href="https://github.com/UnderKoen/UnderBotCSharp">Dicord.net 1.0 bot</a> en de code van de <a href="https://github.com/UnderKoen/UnderBot">JDA bot</a></par>
                            </span>
                        </div>
                    </span>
                </div>
            </div>
        </main>
    </body>
</html>

JavaScript:

window.setTimeout(atStart, 1);
window.setTimeout(update, 100);

function update() {
    $("ul li .drp-down .menu").css("max-height", ($("ul li .drp-down .menu a").first().outerHeight() + 24) * 4);
    var lis = $("#myTopnav").find("li");
    for (var i = 0; i < lis.length; i++) {
        var obj = $(lis[i]);
        if (obj.hasClass("active")) {
            obj.removeClass("active");
        }
        var click = obj.find("a");
        for (var p = 0; p < click.length; p++) {
            var a = $(click[p]);
            if (document.URL == a.prop("href")) {
                obj.addClass("active");
                if (a.attr('href').includes("#.")) {
                    if (hasParentsClass(a,"drp-down")) {
                        sort($(click[0]).attr('href').substring(2), a.attr('href').substring(2));
                        select($(click[0]).attr('href').substring(2));
                    } else {
                        deSort(a.attr('href').substring(2))
                        select(a.attr('href').substring(2));
                    }
                }
            }
        }
    }

    var lis1 = document.getElementsByClassName("top");
    var lis2 = document.getElementsByClassName("top2");
    var lis3 = document.getElementsByClassName("fancy");
    lis2[0].style.minHeight = (lis1[0].clientHeight + 40);
    lis3[0].style.minHeight = (lis1[0].clientHeight + 60);

    window.setTimeout(ehmmm, 670);
}   

function ehmmm() {
    $(".ink").remove();
}

function atStart(){
    update();
    $(window).scroll(function() {
        if ($(this).scrollTop() > 10) { //use `this`, not `document`
            $('.topnav').css({
                'display': 'none'
            });
        } else {
            $('.topnav').css({
                'display': 'inherit'
            });
        }
    });

    var parent, ink, d, x, y;
    $("ul li a").click(function(e){
        $(".ink").remove();
        parent = $(this).parent();
        if ($(this).parents().filter("div.drp-down").length == 0) {
            if(parent.find(".ink").length == 0)
                parent.prepend("<span class='ink'></span>");

            ink = parent.find(".ink");
            ink.removeClass("animate");

            if(!ink.height() && !ink.width())
            {
                d = Math.max(parent.outerWidth(), parent.outerHeight());
                ink.css({height: d, width: d});
            }
            x = e.pageX - parent.offset().left - ink.width()/2;
            y = e.pageY - parent.offset().top - ink.height()/2;

            ink.css({top: y+'px', left: x+'px'}).addClass("animate");
        }
    })

    $("ul li a").click(function(e){
        setTimeout(update, 10);
    });

    $("ul li .drp-down .search").keyup(function(e){
        var input = $(e.currentTarget);
        var filter = input.val().toUpperCase();
        var div = input.parent();
        var a = div.find("a");
        for (var i = 0; i < a.length; i++) {
            var obj = a[i];
            if (obj.innerHTML.toUpperCase().indexOf(filter) > -1) {
                obj.style.display = "";

                if (hasParentsClass(obj, "menu")) {
                    var parents = $(obj).parents(".menu");
                    for (var i2 = 0; i2 < parents.length; i2++) {
                        parents.get(i2).parentElement.firstElementChild.style.display = "";
                        a.remove(parents.get(i2).parentElement.firstElementChild);
                    }
                }
            } else {
                obj.style.display = "none";
            }
        }
    });

    $('ul li .drp-down .menu').bind('mousewheel DOMMouseScroll', function(e) {
        var prevend = false;
        if ($(e.target).parent().hasClass("menu")) {
            if (e.delegateTarget.parentElement.className != "sub-menu" && e.delegateTarget.parentElement.className != "drp-down" ||
                e.target.parentElement != e.currentTarget) {
                prevend = true;    
            }
        }
        if (!prevend) {
            var scrollTo = null;
            if (e.type == 'mousewheel') {
                scrollTo = (e.originalEvent.wheelDelta * -1);
            }
            else if (e.type == 'DOMMouseScroll') {
                scrollTo = 40 * e.originalEvent.detail;
            }

            if (scrollTo) {
                e.preventDefault();
                $(this).scrollTop(scrollTo + $(this).scrollTop());
            }
        }
    });

    $("ul li .drp-down .menu .sub-menu").hover(function(e) {
        var obj = $(e.currentTarget);
        var obj2 = $(obj.find(".menu").get(0));
        var pos = $(obj.find("a").get(0));

        obj2.css("top", pos.offset().top);
        obj2.css("left", pos.offset().left + obj.width());
    });
}

CSS:

.drop {
    display: none;
    position: absolute;
    right: 0px;
}

ul.topnav {
    list-style-type: none;
    padding: 0;
    overflow: hidden;
    background-color: #00796B;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 60px;
    margin-left: 60px;
}

ul.topnav li {
    position: relative;
    overflow: hidden;
    float: left;
    display: inline-block;
}

ul.topnav li a {
    padding: 14px 26px;
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

ul.topnav li .drp-down .menu .sub-menu .menu {
    display: none;
    min-width: 160px;
    z-index: 10;   
}

ul.topnav li.icon {
    display: none;
}

ul.topnav:not(.responsive) li:hover:not(.icon) {
    border-bottom: 3px solid #FB8C00;
}

ul.topnav:not(.responsive) li.active:not(.icon) {
    border-bottom: 3px solid #FB8C00;
}

ul.topnav li .drp-down {
    display: none;
    position: relative;
    z-index: 10;
    margin-top: 3px;
}

ul.topnav li .drp-down .menu {
    overflow-y: hidden;
    background-color: #EEEEEE;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    position: fixed;
    z-index: 10;
}

ul.topnav li .drp-down .search {
    width: 100%;
    background-color: #F5F5F5;
    font-size: 16px;
    padding: 12px 16px;
    border: none;
}

ul.topnav li .drp-down .menu input {
    line-height: 24px;
}

ul.topnav li .drp-down .menu a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    min-width: 167px;
    overflow-y: scroll;
}

ul.topnav li .drp-down a:hover {
    background-color: #E0E0E0;
}

ul.topnav:not(.responsive) li .drp-down .menu .sub-menu:hover > .menu {
    display: inherit;
}

ul.topnav:not(.responsive) li:hover .drp-down {
    display: block;
    position: fixed;
}

.ink {
    display: block; position: absolute;
    background: hsl(180, 40%, 80%);
    border-radius: 100%;
    transform: scale(0);
}
/*animation effect*/
.ink.animate {
    animation: ripple 0.7s linear;
}

@keyframes ripple {
    /*scale the element to 250% to safely cover the entire link and fade it out*/
    100% {opacity: 0; transform: scale(2.5);}
}

@media screen and (max-width:680px) {
    ul.topnav li:not(.active) {display: none;}
    ul.topnav li.icon {
        float: right;
        display: inline-block;
    }

    ul.topnav.responsive {
        position: relative;
    }

    ul.topnav.responsive li.icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    ul.topnav.responsive li {
        float: none;
        display: inline;
        position: static
    }

    ul.topnav.responsive li a {
        display: block;
        text-align: left;
    }

    ul.topnav.responsive .drop {
        display: inherit;
    }

    ul.topnav {
        margin-right: 26px;
        margin-left: 26px;
    }
}

html { 
    font-family: "Helvetica", "Arial", sans-serif;
}

.top {
    background-color: #009688;
    top: 0px;
    position: fixed;
    width: 100%;
    z-index: 3;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

.fancy {
    background: -webkit-linear-gradient(90deg, rgba(0,0,0,0), rgba(48, 79, 254, 1)) !important;
    background: -o-linear-gradient(90deg, rgba(0,0,0,0), rgba(48, 79, 254, 1)) !important;
    background: -moz-linear-gradient(90deg, rgba(0,0,0,0), rgba(48, 79, 254, 1)) !important;
    background: linear-gradient(180deg, rgba(48, 79, 254, 1), rgba(0,0,0,0)) !important;
    position: fixed;
    z-index: 2;
    width: 100%;
}

.index {
    min-height: 200px;
    max-height: none;
    visibility: visible;
    z-index: 1;
    background-color: #E0E0E0 !important;
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

.index .title {
    color: black;
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    padding-top: 20px;
    height: 40px;
    background-color: #FB8C00;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

.index .content {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

.index .content img {
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    width: 50%;
}

.index .content .centerd {
    display: block;
    margin: auto;
    text-align: center;
}

.index .content h1 {
    color: black;
    font-weight: bold;
    font-size: 23px;
    text-align: center;
    margin-top: 20px;
    height: 30px;
    background-color: #F4511E;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

.subindex {
    min-height: 200px;
    max-height: none;
    visibility: visible;
    z-index: 1;
    background-color: #E0E0E0 !important;
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

.subindex .content {
    padding-top: 20px;
    padding-left: 20px;
}

.subindex .title {
    color: black;
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    padding-top: 20px;
    height: 40px;
    background-color: #C0CA33;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

#about {

}

#projects {

}

@viewport {
    zoom: 1.0;
    width: extend-to-zoom; 
}
@-ms-viewport {
    width: extend-to-zoom;
    zoom: 1.0;
}

@media screen and (min-width:680px) {
}

@media screen and (max-width:680px) {
    .menu {
        margin-top: 0px !important;
    }

    .mainindex {
        margin-left: 10px !important;
        margin-right: 10px !important;
        width: calc(100% - 36px) !important;
    }

    .index .content {
        padding-left: 0px;
        padding-right: 0px;
    }
}

最佳答案

调试

如果你以后遇到这样的事情，你需要调试它。

所有现代浏览器都具有内置的 Web 检查器/开发人员工具(如果它们对您来说不够好 - 您可以随时使用 Firebug)。

如果网站在 X 浏览器中看起来不同，您需要做的就是检查看起来不同的元素，然后查看对它们应用了哪些 CSS 规则。差异几乎总是与应用的不同规则有关。如果您无法跟踪 CSS 文件中的现有规则，它们很可能是通过 JavaScript 添加的。

我已经为您的情况录制了一个快速 gif，请注意从链接中删除 float 和最小宽度后一切正常(如 Imube 先前所述)。你实际上并不需要 float 在那里，因为 inline-block 会工作得很好。我通常建议尽可能避免 float 。

Opera 与 Safari - 使用开发工具跟踪您的问题

Opera vs Safari Dev Tools

未压缩:https://gifyu.com/images/debug47afb.gif

为什么它不起作用

与其他浏览器相比，Safari interprets 似乎忽略了 display:inline-block(顺便说一句，inline-block 应该是什么意思在这种情况下？)。

使用开发工具很容易追踪:

了解更多

阅读有关 Chrome、Firefox 和 Safari 开发工具的更多信息。

see full answer

关于javascript - 我的子菜单未在 safari 中显示，但在 chrome 和 firefox 中显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46746834/

上一篇：css - 如何更改位于另一个 DIV 中的 DIV 中的背景颜色

下一篇：html - FlexBox 对齐元素

相关文章：

javascript - 如何检测网页是否正在 WebBrowser Control 中呈现？

jquery - wp_editor Tiny MCE getContent 不返回 HTML View 的内容

java - 从 JSP 调用 Servlet 的方法

Javascript 虚假值(null、undefined、false、空字符串 : "" or '' and 0) and comparison(==) operator

javascript - setInterval() 计时...关闭？

javascript - 通过 props 在 React Native 中设置数组中的文本

javascript - 在 CI 模式下运行时如何测试访问 ember-cli 服务器？

jquery - 视频 html5 : how to get currently played source

html - 通过 URL 插入时，SVG 图标显示损坏的图像

html - 如何在具有动态高度的 div 上居中滚动内容？

©2024 IT工具网  联系我们