用jquery使用html創建一個側邊菜單

我在一個側邊菜單示例程序上工作。在這裏，用戶點擊按鈕以使用html和java腳本顯示具有各種選項的側面菜單。我已經分別放置了我的html，js和css文件，所以我的代碼看起來很乾淨。但是在執行時它不能正常工作，而當整個代碼放在單個文件中時，它可以正常工作。我在做什麼錯誤以及如何將我的代碼分別放在文件中，以便獲得預期結果。用jquery使用html創建一個側邊菜單

HTML：

<body> 
    <button id="button">Click</button> 
    <div id="menu"> 
    <nav> 
     <ul style="list-style-type : none"> 
      <li> <a href="#" id="close"> Close </a></li> 
      <li>Home</li> 
      <li>Contacts</li> 
     </ul> 
     </nav> 
    </div> 
    <script src="sidemenu.js"></script>

JS：

var getDetails = document.querySelector("#menu"); 
console.log(getDetails); 
var getButton = document.querySelector("#button"); 
var closeButton = document.querySelector("#close"); 

getButton.addEventListener("click",function(){ 
    getDetails.addClass('opend'); 
}); 

closeButton.addEventListener("click",function(){ 
    getDetails.removeClass('opend'); 
})

CSS：

ul{ 
    list-style-type: none ; 
}

來源

2017-02-02 jazzoria

我想你將不得不定義什麼「正常工作」是... – evolutionxbox

你是否在html存在之前包含JavaScript？ – krisph

是的，我已經包含了我的js文件。 – jazzoria

這應該是你正在尋找（假設菜單開始爲隱藏）的功能。您正在使用addClass和removeClass雖然這些不是基準的JavaScript函數。我已經將js改爲純粹的js，以達到您想要的相同效果。

var getDetails = document.querySelector("#menu"); 
 
console.log(getDetails); 
 
var getButton = document.querySelector("#button"); 
 
var closeButton = document.querySelector("#close"); 
 

 
getButton.addEventListener("click", function() { 
 
    getDetails.className += 'opend'; 
 
}); 
 

 
closeButton.addEventListener("click", function() { 
 
    getDetails.className = 'hidden'; 
 
})

ul { 
 
    list-style-type: none; 
 
} 
 
.hidden { 
 
    display: none; 
 
} 
 
.opend { 
 
    display: block; 
 
}

<body> 
 
    <button id="button">Click</button> 
 
    <div id="menu" class="hidden"> 
 
    <nav> 
 
     <ul> 
 
     <li> <a href="#" id="close"> Close </a> 
 
     </li> 
 
     <li>Home</li> 
 
     <li>Contacts</li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</body> 
 

 
<script src="sidemenu.js"></script>

來源

2017-02-02 15:28:09 Joffutt4

addClass和removeClass是jQuery函數。他們不使用純JavaScript。

使用從JavaScript添加功能

添加類：

getDetails.classList.add（「運行結束」）;

並使用JavaScript刪除類： getDetails.className =「」;

如果你想維護一些類，然後使用添加再次添加它們。

來源

2017-02-02 15:44:16

用jquery使用html創建一個側邊菜單

回答

相關問題