Question

问题

我的问题是，当我再次点击它时，我试图让我的菜单按钮将其左侧位置移动到230px，然后返回30px。但是，由于某种原因，它不能像我想要的那样工作。

我想要发生什么

当用户第一次点击菜单按钮时，我希望菜单将其左侧位置更改为230px，当用户再次点击菜单关闭导航栏时，我想要菜单＆＃ 39; s左侧位置返回30px

我的目标

目前，菜单按钮仅将其左侧位置更改为230px，但不会更改回30px

Code

Answer 1

您的课程.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
  }
}

Answer 2

$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");
        }
    });
});

我认为您的问题是$ nav width始终＆gt; 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");
        }
    });
});

希望有所帮助。

Answer 3

只需切换活动类（如

）即可实现此目的

$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, () => {   
    					$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>

Answer 4

无需检查状态将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;
}
}

菜单栏不切换左侧位置

4 个答案: