菜單欄不切換左側位置

問題菜單欄不切換左側位置

我的問題是，我試圖讓我的菜單按鈕，當你再次點擊它移到左位置230px，回30px。但是，由於某種原因，它沒有按照我想要的那樣工作。

我想要的東西發生

當用戶點擊一次的菜單按鈕，我想菜單改變它的左側位置，以230px時，當菜單用戶點擊即可關閉導航欄，我想在菜單的左邊位置回到30px

什麼我得到

目前，菜單按鈕只改變其左側位置230px，但未恢復30px

Code

來源

2017-06-02 Siddharth Nand

你的類.toggle沒有設置回left: 30px;。您可以在打開/關閉菜單時使用toggleClass。

的jQuery：

if($nav.css("width", "20%")) { 
    $toggle.toggleClass('active'); 
} else if($nav.css("width", "0")) { 
    $toggle.toggleClass('active'); 
}

CSS：

.toggle { 
    position: fixed; 
    top: 30px; 
    left: 30px; 
    cursor: pointer; 
    color: #333; 
    transform: scale(1); 
    transition: all 300ms ease-in-out; 
    &:hover { 
    transform: scale(1.2); 
    } 

    &.active { 
    left: 230px 
    } 
}

來源

2017-06-02 04:33:09

很好的，我覺得你可以做'$ toggle.toggleClass（ '主動'）;'沒有的if/else如果 –

我也這麼認爲。那樣會更有效率。但也許OP有理由這樣做。 –

$toggle.on("click",() => { 
    toggle($nav, 350,() => { 
     // toggle 
     if($nav.css("width", "20%")) { 
      $toggle.css("left", "230px"); 
     } else if($nav.css("width", "0")) { 
      $toggle.css("left", "30px"); 
     } 
    }); 
});

我覺得你的問題是$導航寬度總是> 0 而我更改代碼：

$toggle.on("click",() => { 
    toggle($nav, 350,() => { 
     // toggle 
     if($nav.hasClass("active")){ 
       $toggle.css("left", "30px"); 
      $nav.removeClass("active"); 
     } 
     else{ 
       $toggle.css("left", "230px"); 
      $nav.addClass("active"); 
     } 
    }); 
});

希望有幫助。

來源

2017-06-02 04:43:15

你可以使用切換就像

$toggle.toggleClass('active');

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
 
    <meta name="robots" content="noindex, nofollow"> 
 
    <meta name="googlebot" content="noindex, nofollow"> 
 
    <script type="text/javascript" src="//code.jquery.com/jquery-git.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="/css/result-light.css"> 
 
    <style type="text/css"> 
 
    nav { 
 
    background-color: #333; 
 
    position: fixed; 
 
    height: 100%; 
 
    width: 25%; 
 
    display: none; } 
 
    nav ul { 
 
    list-style: none; } 
 
    nav ul li { 
 
     display: block; 
 
     color: #fff; 
 
     font: 500 1em Raleway; 
 
     padding: 10px; 
 
     cursor: pointer; } 
 
     nav ul li:hover { 
 
     background-color: #fff; 
 
     color: #333; } 
 

 
.toggle { 
 
    position: fixed; 
 
    top: 30px; 
 
    left: 30px; 
 
    cursor: pointer; 
 
    color: #333; 
 
    transform: scale(1); 
 
    transition: all 300ms ease-in-out; } 
 
    .toggle:hover { 
 
    transform: scale(1.2); } 
 
    .toggle.active { 
 
     left: 230px; } 
 
    </style> 
 
<script type='text/javascript'>//<![CDATA[ 
 
$(window).on('load', function() { 
 
// cache elements 
 
let $toggle = $(".toggle"); 
 
let $nav = $(".nav") 
 

 
$(document).ready(() => { 
 

 
    // activate nav bar 
 
    $toggle.on("click",() => { 
 
     toggle($nav, 350,() => { 
 
    \t \t \t \t \t $toggle.toggleClass('active'); 
 
     }); 
 
    }); 
 

 
}); 
 

 
function toggle(e, speed, callback) { 
 

 
    e.animate({width: 'toggle'}, speed); 
 

 
    if (callback) { 
 
     return callback(); 
 
    } 
 
}; 
 
});//]]> 
 
</script> 
 
</head> 
 
<body> 
 
    <nav class="nav"> 
 
    <ul> 
 
    <li>General Info</li> 
 
    <li>Specs</li> 
 
    <li>RAM/Memory</li> 
 
    <li>Program Versions</li> 
 

 
    <li><i class="fa fa-cog" aria-hidden="true"></i> Settings</li> 
 
    </ul> 
 
</nav> 
 

 
<div class="toggle"><i class="fa fa-bars" aria-hidden="true"></i></div> 
 
<script src="https://use.fontawesome.com/e66a204baf.js"></script> 
 
    <script> 
 
    // tell the embed parent frame the height of the content 
 
    if (window.parent && window.parent.parent){ 
 
    window.parent.parent.postMessage(["resultsFrame", { 
 
     height: document.body.getBoundingClientRect().height, 
 
     slug: "403x9prh" 
 
    }], "*") 
 
    } 
 
</script> 
 
</body> 
 
</html>

來源

2017-06-02 04:50:31

沒有必要活動類檢查狀態添加ID菜單按鈕

<div id="menu-button" class="toggle"><i class="fa fa-bars" aria-hidden="true"></i></div>

實現這一目標更改切換到

$toggle.on("click",() => { 
toggle($nav, 350,() => { 
    // toggle 
    document.getElementById("menu-button").classList.toggle('nav-active'); 
}); 
});

，並改變CSS來此

.toggle { 
position: fixed; 
top: 30px; 
cursor: pointer; 
color: #333; 
transform: scale(1); 
transition: all 200ms ease-in-out; 
&:hover { 
transform: scale(1.2); 
} 
&.nav-active{ 
left:230px; 
} 
}

來源

2017-06-02 05:16:10 Obed

對不起，我刪除了原來的左邊：30px;你可以把它帶回來 – Obed

菜單欄不切換左側位置

回答

相關問題