爲什麼這個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/