切換時按鈕消失，側邊欄出現-有解無憂

我已經用一個按鈕創建了這個頁面，它是漢堡包和一個側邊欄，當用戶點擊漢堡包選單時，它使側邊欄消失，但我面臨的問題是當我切換按鈕時側邊欄消失并出現，但問題是按鈕消失了，我認為它的位置原因：絕對或網格，如果我使位置相對，它發生的方式是按鈕不會消失，但它在上面留下空間，我不想要 HTML 代碼這是側欄和漢堡包的 html 代碼選單已經在側邊欄隱藏 id 因為它在頁面加載時已經隱藏

    <html>
    <head>
        <title>Side Bar</title>
        <link rel="stylesheet" href="./indexSB.css"></link>
        <link href="https://fonts.googleapis.com/css2?family=Noto Sans:ital@1&display=swap"   
    rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Patrick Hand&display=swap" 
     rel="stylesheet">
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons">
        
    </head>
        <body>
            <div id="wrapper-hamBtn">
                <button id="hamburger-btn">Button</button>
            </div>
            <div id="sidebar-hide" class="sidebar-class">
                <div id="upper-row" class="grid-item">
                    <button id="cancel-btn"><span class="material-icons" id="cancel- 
   span">clear</span></button>
                </div>
                <div id="home" class="grid-item"><span class="GI-span">Home</span></div>
                <div id="about" class="grid-item"><span class="GI-span">About</span></div>
                <div id="project" class="grid-item"><span class="GI-span">Project</span></div>
                <div id="contact" class="grid-item"><span class="GI-span">Contact</span></div>
                <div id="end"></div>
                </div>
            <script src="indexSB.js"></script>
        </body>
    </html>

CSS 代碼 我認為這是因為網格，如果我將位置值更改為相對它作業正常，我不能使用相對因為它在按鈕上方留下間隙

*{
    margin:0px;
    background-color: cornflowerblue;
}
.hamburger{
    border:2px solid black;
    margin:3px;
    width:25px;
    border-radius: 5px;
    margin-right: 20px;

}


/* #wrapper-hamBtn{
        display: flex;
        /* align-items: ; */
        /* position: fixed;
        right:0px; */
      /* cursor : pointer; */
    /* } */
    
    /* #cancel-icon{
        
    } */
    #hamburger-btn{
        height: 30px;
        position: absolute;
        left:500px;
        /* display: inline; */
    }
    #cancel{
        font-size: 30px;
        color:red;
    }
    
    #sidebar-show{
        display: grid;
        grid-template-rows: 100px 100x 100px 100px;
        grid-template-columns: 300px;
        transform: translateX(0%);
        transition-duration: 0.5s;
    
    }
    .grid-item{
        height: 90px;
        background-color: white;
        width: 300px;
        border-right: 2px solid black;
        font-size: 50px;
        /* font-family: 'Noto Sans', sans-serif; */
        font-family: 'Patrick Hand', cursive;
        /* position: absolute; */
        /* left:30px; */
        display: flex;
        align-items: center;
    }
    .GI-span{
        background-color: white;
        position: relative;
        left:20px;
    }
    #end{
        background-color: white;
        height: 175px;
        width: 300px;
        border-right:2px solid black;
    }
    #cancel-span{
        background-color: white;
        color: #e60000;
        font-size: 40px;
        cursor: pointer;
        /* transform:rotate(160deg); */
    }
    #cancel-btn{
       border: none;
       background-color: white;
       position: absolute;
       left:240px;
       /* transform:rotateY(70deg); */
    }
    #cancel-span:hover{
        transform: rotate(360deg);
        transition-duration:0.5s;
        color:#ff4d4d;
        transition-timing-function: ease-out;
    }
    .grid-item:hover >.GI-span{
        background-color: rgb(27, 148, 204);
        font-size: 45px;
        transition-duration: 0.5s;
        /* cursor:pointer; */
    
    }
    .grid-item:hover{
        background-color: rgb(27, 148, 204);;
        font-size: 45px;
        transition-duration: 0.5s;
        cursor:pointer;
    }
    #upper-row{
        background-color: white;;
    }
    #sidebar-hide{
        display: grid;
        grid-template-rows: 100px 100x 100px 100px;
        transform: translateX(-100%);   
        transition-duration: 1s;
        /* display: inline; */
    }

Javascript code

let hamBtn=document.querySelector("#hamburger-btn");
let cancelBtn=document.querySelector("#cancel-btn");
let sidebarClass=document.querySelector(".sidebar-class");
let isHide=true;
function showHide(){
    if(isHide==true){
        let hideId=document.getElementById("sidebar-hide");
        hideId.id="sidebar-show";
        isHide=false;
    }
    else{
        let showId=document.getElementById("sidebar-show");
        showId.id="sidebar-hide";
        isHide=true;
    }
}
hamBtn.addEventListener("click",showHide);
cancelBtn.addEventListener("click",showHide);

uj5u.com熱心網友回復：

一種可能的解決方法是使用使按鈕不消失position: absolute。

let hamBtn=document.querySelector("#hamburger-btn");
let cancelBtn=document.querySelector("#cancel-btn");
let sidebarClass=document.querySelector(".sidebar-class");
let isHide=true;
function showHide(){
    if(isHide==true){
        let hideId=document.getElementById("sidebar-hide");
        hideId.id="sidebar-show";
        isHide=false;
    }
    else{
        let showId=document.getElementById("sidebar-show");
        showId.id="sidebar-hide";
        isHide=true;
    }
}
hamBtn.addEventListener("click",showHide);
cancelBtn.addEventListener("click",showHide);

*{
    margin:0px;
    background-color: cornflowerblue;
}
.hamburger{
    border:2px solid black;
    margin:3px;
    width:25px;
    border-radius: 5px;
    margin-right: 20px;

}


/* #wrapper-hamBtn{
        display: flex;
        /* align-items: ; */
        /* position: fixed;
        right:0px; */
      /* cursor : pointer; */
    /* } */
    
    /* #cancel-icon{
        
    } */
    #hamburger-btn{
        height: 30px;
        position: absolute;
        left:500px;
        z-index: 1;
        /* display: inline; */
    }
    #cancel{
        font-size: 30px;
        color:red;
    }
    
    #sidebar-show{
        display: grid;
        grid-template-rows: 100px 100x 100px 100px;
        grid-template-columns: 300px;
        transform: translateX(0%);
        transition-duration: 0.5s;
    
    }
    .grid-item{
        height: 90px;
        background-color: white;
        width: 300px;
        border-right: 2px solid black;
        font-size: 50px;
        /* font-family: 'Noto Sans', sans-serif; */
        font-family: 'Patrick Hand', cursive;
        /* position: absolute; */
        /* left:30px; */
        display: flex;
        align-items: center;
    }
    .GI-span{
        background-color: white;
        position: relative;
        left:20px;
    }
    #end{
        background-color: white;
        height: 175px;
        width: 300px;
        border-right:2px solid black;
    }
    #cancel-span{
        background-color: white;
        color: #e60000;
        font-size: 40px;
        cursor: pointer;
        /* transform:rotate(160deg); */
    }
    #cancel-btn{
       border: none;
       background-color: white;
       position: absolute;
       left:240px;
       /* transform:rotateY(70deg); */
    }
    #cancel-span:hover{
        transform: rotate(360deg);
        transition-duration:0.5s;
        color:#ff4d4d;
        transition-timing-function: ease-out;
    }
    .grid-item:hover >.GI-span{
        background-color: rgb(27, 148, 204);
        font-size: 45px;
        transition-duration: 0.5s;
        /* cursor:pointer; */
    
    }
    .grid-item:hover{
        background-color: rgb(27, 148, 204);;
        font-size: 45px;
        transition-duration: 0.5s;
        cursor:pointer;
    }
    #upper-row{
        background-color: white;;
    }
    #sidebar-hide{
        display: grid;
        grid-template-rows: 100px 100x 100px 100px;
        transform: translateX(-100%);   
        transition-duration: 1s;
        /* display: inline; */
    }

<!DOCTYPE html>
<html>
    <head>
        <title>Side Bar</title>
        <link rel="stylesheet" href="./indexSB.css"></link>
        <link href="https://fonts.googleapis.com/css2?family=Noto Sans:ital@1&display=swap"   
    rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Patrick Hand&display=swap" 
     rel="stylesheet">
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons">
        <link rel="stylesheet" href="style.css">
    </head>
        <body>
            <div id="wrapper-hamBtn">
                <button id="hamburger-btn">Button</button>
            </div>
            <div id="sidebar-hide" class="sidebar-class">
                <div id="upper-row" class="grid-item">
                    <button id="cancel-btn"><span class="material-icons" id="cancel- 
   span">clear</span></button>
                </div>
                <div id="home" class="grid-item"><span class="GI-span">Home</span></div>
                <div id="about" class="grid-item"><span class="GI-span">About</span></div>
                <div id="project" class="grid-item"><span class="GI-span">Project</span></div>
                <div id="contact" class="grid-item"><span class="GI-span">Contact</span></div>
                <div id="end"></div>
                </div>
            <script src="indexSB.js"></script>
        </body>
    </html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/377611.html

標籤：javascript html css

上一篇：使用onmouseover()制作了一個display:block但我無法點擊它，因為一旦我將滑鼠移開它就會因為onmouseout()而消失

下一篇：我的腳本沒有根據計時器觸發所有電子郵件