调整窗口大小时打开响应侧菜单

Question

我一直在编写一个副菜单，它似乎工作得很好。。。但是有个bug。

当窗口小于660像素时，侧菜单会隐藏媒体查询。然后出现一个汉堡图标，侧边栏消失。

如果您单击"盗贼"，则菜单将再次出现。

如果您单击"X"关闭工具栏，菜单将再次显示。

在这里之前，一切都好。

现在，如果将大小调整为正常大小，则侧菜单已完全消失。

我需要在调整大小大于660px时打开它，但很难让它工作。

这是一个混乱的代码(我不需要删除一些意图来使其工作(。

    var openMenu = function(){
    el = document.getElementsByTagName("aside")[0];
    el.style.display = "block";
    document.getElementById("burguer-menu").style.display = "none";
}
var closeMenu = function(){
    el = document.getElementsByTagName("aside")[0];
    el.style.display = "none";
    document.getElementById("burguer-menu").style.display = "inline";
}
var openMenuOnResize = function(){
    const mq = window.matchMedia("(min-width: 660px)");
    if (mq.matches) {
        openMenu;
    }
}
document.getElementById("burguer-menu").addEventListener("click", openMenu);
document.getElementById("aside-logo-mb").addEventListener("click", closeMenu);
//window.addEventListener('resize', openMenuOnResize);
/*Resize Window */
 if (matchMedia) {
    const mq = window.matchMedia("(min-width: 660px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
    }
 //    media query change
     function WidthChange(mq) {
    if (mq.matches) { openMenu;
     // window width is at least 660px
    } else {
      window width is less than 660px
     }
    }

这是一个带完整代码的代码笔。

谢谢你的帮助。

Answer 1

var openMenu = function(){
    el = document.getElementsByTagName("aside")[0];
    el.style.display = "block";
    document.getElementById("burguer-menu").style.display = "none";
}
var closeMenu = function(){
    el = document.getElementsByTagName("aside")[0];
    el.style.display = "none";
    document.getElementById("burguer-menu").style.display = "inline";
}
var openMenuOnResize = function(){
    const mq = window.matchMedia("(min-width: 660px)");
    if (mq.matches) {
        openMenu;
    }
}
document.getElementById("burguer-menu").addEventListener("click", openMenu);
document.getElementById("aside-logo-mb").addEventListener("click", closeMenu);
window.addEventListener('resize', openMenuOnResize);
/*Resize Window */
 if (matchMedia) {
    const mq = window.matchMedia("(min-width: 660px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
    }
    
 //    media query change
     function WidthChange(mq) {
    if (mq.matches) { openMenu;
     // window width is at least 660px
	 document.getElementById('sidemenu').style.display='block'
	 
	 
    } else {
     // window width is less than 660px
	 document.getElementById('sidemenu').style.display='none';
	 var btn=document.getElementById('burguer-menu');
	 if(isHidden(btn)){
		 btn.style.display='inline';
		 }
     }
    
    }
function isHidden(el) {
    var style = window.getComputedStyle(el);
    return (style.display === 'none')
}

body {
    display: flex;
    min-height: 100vh;
    flex-direction: row;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
}
/* NAV SECTION */
aside {
    display:inline;
    flex: 1;
    background-color: #1a2b42;
    min-width:280px;
    /* top:0;
    bottom:0;
    width: 20%;
    height: 100%; */
}
.aside-logo {
    display:flex;
    flex-direction: column;
    color: white;
    font-size: 2rem;
    padding: 20px;
    width: 100%;
}
.aside-logo p {
    font-size: 12px;
}
#aside-logo-mb {
    display: none;
}
.aside-logo a {
    text-decoration: none;
    color: white;
    font-size: 3rem;
}
aside hr {
    border-color: #4c5267;
    margin:0;
    padding:0;
}
.menu-link {
    color:#98A4CE;
    padding:20px 3px 20px 20px;
    display:block;
    text-decoration: none;
}
.menu-link:hover{
    color: white;
    border-left:solid 3px #363a51;
    background-color:#363a51;
    padding:20px 30px 20px 40px;
    display:block;
}
.menu-link:active {
    color: #67f494;
    border-left:solid 3px #67f494;
    background-color:#363a51;
    padding:20px 30px 20px 17px;
    display:block;
}
.active-menu-link {
    color: #67f494;
    border-left:solid 3px #67f494;
    background-color:#363a51;
    padding:20px 30px 20px 17px;
    display:block;
}
.far {
    color:#67f494;
    padding-right:15px;
}
.fas {
    color:#67f494;
    padding-right:15px;
}
/* MAIN SECTION */
main {
    display: flex;
    flex-direction: column;
    flex: 5;
    background-color:#98A4CE;
}
/*HEADER SECTION*/
header {
    display: flex;
    min-height: 50px;
    background-color: white;
}
.top-nav_right {
    display:flex;
    flex:1;
    flex-direction: row;
    justify-content: flex-end;
    margin-right: 30px;
}
.top-nav_left {
    display:none;
    flex: 1;
    flex-direction: row;
}
.top-nav_right-sm {
    display: none;
}
#burguer-menu {
    color:#67f494;
    padding-right:15px;
}
.content{
    flex: 4;
}
footer {
    display: flex;
    min-height: 50px;
    background-color:#4C5267;
}
footer p {
    padding: 0 0 0 30px;
    color:#98A4CE;
}
@media(max-width:660px) {
    aside {
        display:none;
    }
    .aside-logo{
        display:none;
    }
    #aside-logo-mb{
        display: block;
    }
    header{background-color:#1a2b42;}
    .top-nav_left {
        display:flex;
        flex: 1;
        flex-direction: row;
        color: white;
        padding: 0 0 0 20px;
    }
    .top-nav_right-sm {
        display: flex;
    }
    .top-nav_right {
        display: none;
    }
}

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<aside id="sidemenu">
        <div class="aside-logo" id="aside-logo">
            LOGO
        <p>Your slogan </p>
        
        </div>
        <div class="aside-logo" id="aside-logo-mb">
         <a href="#">&times</a>    
        </div>
        <hr>
        <a href="#" class="active-menu-link"><i class="fas fa-home"></i> Home</a>
        <a href="#" class="menu-link"><i class="far fa-address-book"></i> Item 1</a>
        <a href="#" class="menu-link"><i class="far fa-calendar-alt"></i> Item 2</a>
        <a href="#" class="menu-link"><i class="fas fa-users"></i> Item 3</a>
        <a href="#" class="menu-link"><i class="far fa-check-square"></i> Item 4</a>
        <a href="#" class="menu-link"><i class="far fa-map"></i> Item 5</a>
        <a href="#" class="menu-link"><i class="fas fa-expand"></i> Item 6</a>
        <a href="#" class="menu-link"><i class="fas fa-feather-alt"></i>Item 8</a>
    
</aside>
<main>
    <header>
        <div class="top-nav_left">
            <p>LOGO</p>
        </div>
        <div class="top-nav_right">
                <a href="#"><i class="fas fa-user-circle"></i>Profile</a>
                <a href="#"><i class="fas fa-cog"></i>Settings</a>
        </div>
        <div class="top-nav_right-sm">
                <a href="#" id="burguer-menu" onclick="openMenu"><i class="fas fa-bars"></i></a>
        </div>
    </header>
    <div class="content">
    </div>
    <footer>
        <p>Copyright 2018</p>
        <p>Terms & Conditions</p>
    </footer>
</main>

Answer 2

var openMenu = function(){
    el = document.getElementsByTagName("aside")[0];
    el.style.display = "block";
    document.getElementById("burguer-menu").style.display = "none";
}
var closeMenu = function(){
    el = document.getElementsByTagName("aside")[0];
    el.style.display = "none";
    document.getElementById("burguer-menu").style.display = "inline";
}
var openMenuOnResize = function(){
    const mq = window.matchMedia("(min-width: 660px)");
    if (mq.matches) {
        openMenu;
    }
}
document.getElementById("burguer-menu").addEventListener("click", openMenu);
document.getElementById("aside-logo-mb").addEventListener("click", closeMenu);
//window.addEventListener('resize', openMenuOnResize);
/*Resize Window */
 if (matchMedia) {
    const mq = window.matchMedia("(min-width: 660px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
    }
    
 //    media query change
     function WidthChange(mq) {
    if (mq.matches) { openMenu;
     // window width is at least 660px
    }
    else {
    }
    
    }

/* 
COLOR PALETTE
light green #67f494 	(103,244,148)
green #5cc59e     (92,197,158)
greyBlue #385D8E
lightest gray #98A4CE
light gray #4C5267
gray #4c5267     (76,82,103)
middle grey #363a51     (54,58,81)
dark grey #1a2b42	    (26,43,66)
FONTS
font-family: 'Open Sans', sans-serif;
*/
body {
    display: flex;
    min-height: 100vh;
    flex-direction: row;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
}
/* NAV SECTION */
aside {
    display:inline;
    flex: 1;
    background-color: #1a2b42;
    min-width:280px;
    /* top:0;
    bottom:0;
    width: 20%;
    height: 100%; */
}
.aside-logo {
    display:flex;
    flex-direction: column;
    color: white;
    font-size: 2rem;
    padding: 20px;
    width: 100%;
}
.aside-logo p {
    font-size: 12px;
}
#aside-logo-mb {
    display: none;
}
.aside-logo a {
    text-decoration: none;
    color: white;
    font-size: 3rem;
}
aside hr {
    border-color: #4c5267;
    margin:0;
    padding:0;
}
.menu-link {
    color:#98A4CE;
    padding:20px 3px 20px 20px;
    display:block;
    text-decoration: none;
}
.menu-link:hover{
    color: white;
    border-left:solid 3px #363a51;
    background-color:#363a51;
    padding:20px 30px 20px 40px;
    display:block;
}
.menu-link:active {
    color: #67f494;
    border-left:solid 3px #67f494;
    background-color:#363a51;
    padding:20px 30px 20px 17px;
    display:block;
}
.active-menu-link {
    color: #67f494;
    border-left:solid 3px #67f494;
    background-color:#363a51;
    padding:20px 30px 20px 17px;
    display:block;
}
.far {
    color:#67f494;
    padding-right:15px;
}
.fas {
    color:#67f494;
    padding-right:15px;
}
/* MAIN SECTION */
main {
    display: flex;
    flex-direction: column;
    flex: 5;
    background-color:#98A4CE;
}
/*HEADER SECTION*/
header {
    display: flex;
    min-height: 50px;
    background-color: white;
}
.top-nav_right {
    display:flex;
    flex:1;
    flex-direction: row;
    justify-content: flex-end;
    margin-right: 30px;
}
.top-nav_left {
    display:none;
    flex: 1;
    flex-direction: row;
}
.top-nav_right-sm {
    display: none;
}
#burguer-menu {
    color:#67f494;
    padding-right:15px;
}
.content{
    flex: 4;
}
footer {
    display: flex;
    min-height: 50px;
    background-color:#4C5267;
}
footer p {
    padding: 0 0 0 30px;
    color:#98A4CE;
}
@media(max-width:660px) {
    aside {
        display:none;
    }
    .aside-logo{
        display:none;
    }
    #aside-logo-mb{
        display: block;
    }
    header{background-color:#1a2b42;}
    .top-nav_left {
        display:flex;
        flex: 1;
        flex-direction: row;
        color: white;
        padding: 0 0 0 20px;
    }
    .top-nav_right-sm {
        display: flex;
    }
    .top-nav_right {
        display: none;
    }
}
@media (min-width: 660px) {
  aside {
      display: inline !important;
  }
}

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<aside>
        <div class="aside-logo" id="aside-logo">
            LOGO
        <p>Your slogan </p>
        
        </div>
        <div class="aside-logo" id="aside-logo-mb">
         <a href="#">&times</a>    
        </div>
        <hr>
        <a href="#" class="active-menu-link"><i class="fas fa-home"></i> Home</a>
        <a href="#" class="menu-link"><i class="far fa-address-book"></i> Item 1</a>
        <a href="#" class="menu-link"><i class="far fa-calendar-alt"></i> Item 2</a>
        <a href="#" class="menu-link"><i class="fas fa-users"></i> Item 3</a>
        <a href="#" class="menu-link"><i class="far fa-check-square"></i> Item 4</a>
        <a href="#" class="menu-link"><i class="far fa-map"></i> Item 5</a>
        <a href="#" class="menu-link"><i class="fas fa-expand"></i> Item 6</a>
        <a href="#" class="menu-link"><i class="fas fa-feather-alt"></i>Item 8</a>
    
</aside>
<main>
    <header>
        <div class="top-nav_left">
            <p>LOGO</p>
        </div>
        <div class="top-nav_right">
                <a href="#"><i class="fas fa-user-circle"></i>Profile</a>
                <a href="#"><i class="fas fa-cog"></i>Settings</a>
        </div>
        <div class="top-nav_right-sm">
                <a href="#" id="burguer-menu" onclick="openMenu"><i class="fas fa-bars"></i></a>
        </div>
    </header>
    <div class="content">
    </div>
    <footer>
        <p>Copyright 2018</p>
        <p>Terms & Conditions</p>
    </footer>
</main>