为什么这个 jQuery 汉堡包按钮不起作用？

Question

我已经改编了 here 找到的教程，但无法使其正常工作。

目标是让整个页面向左滑出以显示导航菜单。现在我只专注于让动画正常工作。

HTML:

<div class="pg-container">
  <div class="nav-bar">
    <h1>My Site</h1>
    <img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" width="40" height="40px" class="hamburger">
  </div>
  <div class="welcome">
    <h2>Hamburger Demo</h2>
  </div>
</div>

CSS:

body {
  margin: 0;
}

h1 {
  font-family: sans-serif;
  padding: 0;
  margin: 0;
  font-size: 2em;
  float: left;
}

h2 {
  color: white;
  font-size: 3em;
  text-align: center;
}

.pg-container {
  height: 100vh;
  background-image: url(https://pixabay.com/static/uploads/photo/2013/10/02/23/03/dawn-190055_960_720.jpg);
  background-size: cover;
}

.nav-bar {
  height: 40px;
  background-color: hsla(360, 100%, 100%, 0.51)
}

.hamburger {
  float: right
}

.welcome {
  margin: 10em 0
}

和Javascript:

// Open the menu
  $(".hamburger").click(function() {

  // set width of page container
    var contentWidth = $(".pg-container").width();
    $(".pg-container").css('width', contentWidth);

  // disable all scrolling on mobile devices while menu is shown
    $(".pg-container").bind('touchmove', function(e){e.preventDefault()})

    // set margin for whole container with jQuery UI animation
    $(".pg-container").animate({"margin-right": "50%"}, 700)
})

我怀疑这个问题与设置页面宽度的部分有关，以防止添加右边距时布局发生变化。这是因为 Javascript 在添加上边距而不是右边距时有效。

Answer 1

它不起作用，因为你在边距之前设置了宽度。

删除这部分：

var contentWidth = $(".pg-container").width();
$(".pg-container").css('width', contentWidth);

此处示例：https://jsfiddle.net/7oqw85ph/

全宽布局：https://jsfiddle.net/7oqw85ph/1/

为什么这个 jQuery 汉堡包按钮不起作用？

Why isn't this jQuery hamburger button working?

javascript

jquery

hamburger-menu