如何更改此元素的樣式屬性？

我試圖做一個網站的移動版本的下拉菜單，似乎無法弄清楚我做錯了什麼。我有我想要的初始位置（固定在屏幕的右上角），但當您單擊「菜單」選項卡時，它不會執行任何操作。這裏是我的JSFiddle 如何更改此元素的樣式屬性？

<div id="mobile-nav-wrapper"> 
    <ul id="mobile-nav"> 
     <li>Main Menu</li> 
     <ul> 
      <li>Home</li> 
      <li>About</li> 
      <li>Contact</li> 
      <li>Register</li> 
      <li>FAQs</li> 
      <li>Facebook</li> 
     </ul> 
     <li>This Page</li> 
     <ul> 
      <li>Some Text</li> 
      <li>Who?</li> 
     </ul> 
    </ul> 
    <span id="mobile-nav-button" onclick="pullmenu('#mobile-nav-wrapper')">Menu</span 
</div>

來源

2014-04-30 Calvin P.

你的JavaScript函數不是全局。您已將JSFiddle配置爲將其包裝在一個onload處理程序中。它不在該功能的範圍之外。

不要使用內部事件屬性，它們依賴於全局變量。 Bind your event handlers with JS。

span不是一個交互式元素。它不會出現在焦點順序中，因此當您依賴與之互動的人時，會出現嚴重的可訪問性問題。改爲使用按鈕。如果你不喜歡它的外觀，就應用CSS。

<button type="button" id="mobile-nav-button">Menu</button> 

<script> 
document.getElementById('mobile-nav-button').addEventListener('click', function (evt) { 
    pullmenu('#mobile-nav-wrapper'); 
}); 

function pullmenu(etc) { etc } 
</script>

來源

2014-04-30 13:35:57 Quentin

你說的沒錯，一個按鈕比跨度更符合邏輯。但由於某些原因，這段代碼無法正常工作。（是的，我用適當的代碼替換'etc'） –

它工作正常[這裏]（http://jsbin.com/beselebu/1/edit） – Quentin

這很奇怪...它仍然不工作在這裏http： //jsfiddle.net/qj26L/ 編輯：我真的希望得到這個工作，因爲它似乎像按鈕一次點擊激活，然後再次點擊打開。 –

的JavaScript

<script> 
function pullmenu(menu) { 
var x = document.getElementById(menu).style; 
if (x.top == "-15em") {x.top="0";} 
else {x.top="-15em";} 
} 
</script>

HTML：

<span id="mobile-nav-button" onclick="pullmenu('mobile-nav-wrapper')">Menu</span>

Example

來源

2014-04-30 13:36:52 potashin

啊哈這個作品，謝謝！如果它是一段較長的代碼，我會選擇將js保留在自己的文件中，但這足夠短，可以複製/粘貼到每個頁面。 –

將它包含在每個頁面中，要麼通過PHP包含，要麼包含Apache SSI包含，但是如果要將該腳本更新到該行，則複製/粘貼到每個靜態頁面將會是一場噩夢 –

我將將範圍更改爲一個按鈕，昆汀建議，但在這一點上，我保持JavaScript代碼。 eventListener不工作。 –

如何更改此元素的樣式屬性？

回答

相關問題