document.getElementById（ 'nav'）。style.width - 動作してから停止します。

Question

JavaScript、HTML、CSSを使って基本的なフルスクリーンメニューオーバーレイを試しています。私のHTMLで

私が持っている：

<a href="" class="openBtn" onclick="openNav()">Open</a>

そして、私のapp.jsで：

$(document).foundation() 

// Menu 

function openNav() { 
    document.getElementById('nav').style.width = '100%'; 
} 

私は '開く' をクリックすると、メニューが現れと近接しています。

Answer 1

ではなく

function openNav() { 
    document.getElementById('nav').classList.add('show'); 
} 

次にCSS

.show{ 
    width: 100%; 
}