为什么这个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/