浏览器扩展后，下拉菜单继续保留

时间：2016-06-30 12:27:29

标签： javascript html

我有一个响应式菜单，我有一些问题 如果您以全屏格式在笔记本电脑中运行此代码，则将浏览器宽度更改为断点943px以下，菜单更改为移动格式，在这种情况下，如果您选择例如＆＃34;关于选项＆＃34;它出现了下拉列表。如果您在不先关闭屏幕的情况下将屏幕重新调整为完整尺寸，那就更为严重了。下拉，它没有在全屏幕上消失，即使在浏览器完全展开后它仍然保持不变。它看起来搞砸了 任何的想法？感谢

＆＃13;
＆＃13; 
/*global $ */
$(document).ready(function () {

    "use strict";

    $('.menu > ul > li:has( > ul)').addClass('');
    //Checks if li has sub (ul) and adds class for toggle icon - just an UI


    $('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
    //Checks if drodown menu's li elements have anothere level (ul), if not the dropdown is shown as regular dropdown, not a mega menu (thanks Luka Kladaric)

    $(".menu > ul").before("<a href=\"#\" class=\"menu-mobile\"></a>");



    $(".menu > ul > li").hover(function (e) {
        if ($(window).width() > 943) {
            $(this).children("ul").stop(true, false).fadeToggle(150);
            e.preventDefault();
        }
    });
    //If width is more than 943px dropdowns are displayed on hover

    $(".menu > ul > li").click(function () {
        if ($(window).width() <= 943) {
            $(this).children("ul").fadeToggle(150);
        }
    });
	



    $(".menu-mobile").click(function (e) {
        $(".menu > ul").toggleClass('show-on-mobile');
        e.preventDefault();
    });
	

});
＆＃13; 
–––––––––––––––––––––––––––––––––––––––––––––––––– */

body {
    font-family: 'Source Sans Pro', sans-serif;
}

* {
    box-sizing: border-box;
}

a {
    color: #333;
}

.description {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
megamenu.js STYLE STARTS HERE
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Screen style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.menu-container {
    width: 80%;
    margin: 0 auto;
    background: #e9e9e9;
}

.menu-mobile {
    display: none;
    padding: 20px;
}

.menu-mobile:after {
    content: "\f394";
    font-family: "Ionicons";
    font-size: 2.5rem;
    padding: 0;
    float: right;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-25%);
    -ms-transform: translateY(-25%);
    transform: translateY(-25%);
}

.menu-dropdown-icon:before {
    content: "\f489";
    font-family: "Ionicons";
    display: none;
    cursor: pointer;
    float: right;
    padding: 1.5em 2em;
    background: #fff;
    color: #333;
}

.menu > ul {
    margin: 0 auto;
    width: 100%;
    list-style: none;
    padding: 0;
    position: relative;
    /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
    box-sizing: border-box;
}

.menu > ul:before,
.menu > ul:after {
    content: "";
    display: table;
}

.menu > ul:after {
    clear: both;
}

.menu > ul > li {
    float: left;
    background: #e9e9e9;
    padding: 0;
    margin: 0;
}

.menu > ul > li a {
    text-decoration: none;
    padding: 1.5em 3em;
    display: block;
}

.menu > ul > li:hover {
    background: #f0f0f0;
}

.menu > ul > li > ul {
    display: none;
    width: 100%;
    background: #f0f0f0;
    padding: 20px;
    position: absolute;
    z-index: 99;
    left: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
}

.menu > ul > li > ul:before,
.menu > ul > li > ul:after {
    content: "";
    display: table;
}

.menu > ul > li > ul:after {
    clear: both;
}

.menu > ul > li > ul > li {
    margin: 0;
    padding-bottom: 0;
    list-style: none;
    width: 25%;
    background: none;
    float: left;
}

.menu > ul > li > ul > li a {
    color: #777;
    padding: .2em 0;
    width: 95%;
    display: block;
    border-bottom: 1px solid #ccc;
}

.menu > ul > li > ul > li > ul {
    display: block;
    padding: 0;
    margin: 10px 0 0;
    list-style: none;
    box-sizing: border-box;
}

.menu > ul > li > ul > li > ul:before,
.menu > ul > li > ul > li > ul:after {
    content: "";
    display: table;
}

.menu > ul > li > ul > li > ul:after {
    clear: both;
}

.menu > ul > li > ul > li > ul > li {
    float: left;
    width: 100%;
    padding: 10px 0;
    margin: 0;
    font-size: .8em;
}

.menu > ul > li > ul > li > ul > li a {
    border: 0;
}

.menu > ul > li > ul.normal-sub {
    width: 300px;
    left: auto;
    padding: 10px 20px;
}

.menu > ul > li > ul.normal-sub > li {
    width: 100%;
}

.menu > ul > li > ul.normal-sub > li a {
    border: 0;
    padding: 1em 0;
}


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media only screen and (max-width: 959px) {
    .menu-container {
        width: 100%;
    }
    .menu-mobile {
        display: block;
    }
    .menu-dropdown-icon:before {
        display: block;
    }
    .menu > ul {
        display: none;
    }
    .menu > ul > li {
        width: 100%;
        float: none;
        display: block;
    }
    .menu > ul > li a {
        padding: 1.5em;
        width: 100%;
        display: block;
    }
    .menu > ul > li > ul {
        position: relative;
    }
    .menu > ul > li > ul.normal-sub {
        width: 100%;
    }
    .menu > ul > li > ul > li {
        float: none;
        width: 100%;
        margin-top: 20px;
    }
    .menu > ul > li > ul > li:first-child {
        margin: 0;
    }
    .menu > ul > li > ul > li > ul {
        position: relative;
    }
    .menu > ul > li > ul > li > ul > li {
        float: none;
    }
    .menu .show-on-mobile {
        display: block;
    }
}
＆＃13; 
<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>megamenu.js | Last responsive megamenu you'll ever need</title>
    <meta name="description" content="">
    <meta name="keywords" content="" />
    <meta name="author" content="Mario Loncarek">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/ionicons.min.css">
    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300' rel='stylesheet' type='text/css'>
    <!-- JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
    <script>
        window.Modernizr || document.write('<script src="js/vendor/modernizr-2.8.3.min.js"><\/script>')
    </script>
</head>

<body>

    <div class="menu-container">
        <div class="menu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="http://marioloncarek.com">About</a>
                    <ul>
                        <li><a href="http://marioloncarek.com">School</a>
                            <ul>
                                <li><a href="http://marioloncarek.com">Lidership</a></li>
                                <li><a href="#">History</a></li>
                                <li><a href="#">Locations</a></li>
                                <li><a href="#">Careers</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Study</a>
                            <ul>
                                <li><a href="#">Undergraduate</a></li>
                                <li><a href="#">Masters</a></li>
                                <li><a href="#">International</a></li>
                                <li><a href="#">Online</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Research</a>
                            <ul>
                                <li><a href="#">Undergraduate research</a></li>
                                <li><a href="#">Masters research</a></li>
                                <li><a href="#">Funding</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Something</a>
                            <ul>
                                <li><a href="#">Sub something</a></li>
                                <li><a href="#">Sub something</a></li>
                                <li><a href="#">Sub something</a></li>
                                <li><a href="#">Sub something</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="http://marioloncarek.com">News</a>
                    <ul>
                        <li><a href="http://marioloncarek.com">Today</a></li>
                        <li><a href="#">Calendar</a></li>
                        <li><a href="#">Sport</a></li>
                    </ul>
                </li>
                <li><a href="http://marioloncarek.com">Contact</a>
                    <ul>
                        <li><a href="#">School</a>
                            <ul>
                                <li><a href="#">Lidership</a></li>
                                <li><a href="#">History</a></li>
                                <li><a href="#">Locations</a></li>
                                <li><a href="#">Careers</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Study</a>
                            <ul>
                                <li><a href="#">Undergraduate</a></li>
                                <li><a href="#">Masters</a></li>
                                <li><a href="#">International</a></li>
                                <li><a href="#">Online</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Study</a>
                            <ul>
                                <li><a href="#">Undergraduate</a></li>
                                <li><a href="#">Masters</a></li>
                                <li><a href="#">International</a></li>
                                <li><a href="#">Online</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Empty sub</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

    <div class="description">
        <h3>megamenu.js - Last responsive megamenu you'll ever need</h3>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script>
        window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')
    </script>
    <script src="js/megamenu.js"></script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

如果我理解你的问题是正确的，那么做一个你想做的事就是通过在调整大小时刷新网页。

以下是一些JavaScript：

window.addEventListener('resize', function(event) {
    clearTimeout(resizeTimeout);
    var resizeTimeout = setTimeout(function(){
        window.location.reload();
    }, 300);
});

<强> 更新 ： 由于它只是一个菜单，因此刷新整个页面并不理想，所以另一种方法是减少其z-index，阅读有关z-index的更多信息：http://www.w3schools.com/cssref/pr_pos_z-index.asp

示例：的

使用Javascript：

    var currentWidth ;

setInterval(function(){
    currentWidth = window.innerWidth;
    if(currentWidth < 983) { //983 or whatever threshold you want
        document.getElementsByClassName(".menu-container").style.zIndex = -999; //set the value to -999 just to be sure :)
    }
    else{
        document.getElementsByClassName(".menu-container").style.zIndex = 999;
    }
}, 300);

答案 1 :(得分：0)

问题是您可以通过以下代码在移动模式下“打开”多个子菜单：

$(".menu > ul > li").click(function () {
    if ($(window).width() <= 943) {
        $(this).children("ul").fadeToggle(150);
    }
});

您可以做的是添加侦听窗口调整大小事件然后淡出打开的菜单的代码。我用下面的代码做到了这一点。它记住打开了哪个子菜单，然后在调整大小时关闭它们：

    var openSubMenu = undefined;  // You want to store the open sub-menu here

    $('.menu > ul > li:has( > ul)').addClass('menu-dropdown-icon');
    //Checks if li has sub (ul) and adds class for toggle icon - just an UI

    $('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
    //Checks if drodown menu's li elements have anothere level (ul), if not the dropdown is shown as regular dropdown, not a mega menu (thanks Luka Kladaric)

    $(".menu > ul").before("<a href=\"#\" class=\"menu-mobile\">Navigation</a>");

    //Adds menu-mobile class (for mobile toggle menu) before the normal menu
    //Mobile menu is hidden if width is more then 959px, but normal menu is displayed
    //Normal menu is hidden if width is below 959px, and jquery adds mobile menu
    //Done this way so it can be used with wordpress without any trouble

    //If width is more than 943px dropdowns are displayed on hover
    $(".menu > ul > li").hover(function (e) {
        if ($(window).width() > 943) {
            $(this).children("ul").stop(true, false).fadeToggle(150);
            e.preventDefault();
        }
    });

    //If width is less or equal to 943px dropdowns are displayed on click (thanks Aman Jain from stackoverflow)
    $(".menu > ul > li").click(function () {
        if ($(window).width() <= 943) {
            var thisItem = $(this).children("ul");
            if (openSubMenu && openSubMenu.get(0) != thisItem.get(0)) openSubMenu.fadeOut(0);
            openSubMenu = thisItem;
            openSubMenu.fadeToggle(150);
            //$(this).children("ul").fadeToggle(150);
        }
    });

    //When clicked on mobile-menu, normal menu is shown as a list, classic rwd menu story (thanks mwl from stackoverflow)
    $(".menu-mobile").click(function (e) {
        $(".menu > ul").toggleClass('show-on-mobile');
        e.preventDefault();
    });

    // When the window resizes clear any open windows
    $(window).resize(() => {
        if (openSubMenu && openSubMenu.css('display') === 'block') {
            openSubMenu.fadeOut(0);
            openSubMenu = undefined;
        }
    })
};
相关问题
最新问题