菜单栏不切换左侧位置

问题菜单栏不切换左侧位置

我的问题是，我试图让我的菜单按钮，当你再次点击它移到左位置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

菜单栏不切换左侧位置

回答

相关问题