Question

我参与了一个侧面菜单示例程序。在这里，用户点击按钮，使用html和java脚本显示带有各种选项的侧边菜单。我已经分别放置了我的html，js和css文件，因此，我的代码看起来很干净。但是在执行时它不能正常工作，而当整个代码放在单个文件中时它工作正常。我犯的错误是什么以及如何将我的代码单独放在文件中以便获得预期的输出。

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 ;
}

Answer 1

这应该是您正在寻找的功能（假设菜单以隐藏方式启动）。您正在使用addClass和removeClass，但这些不是基线javascript函数。我已经将js改为纯js，以达到你想要的相同结果。

＆＃13;

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';
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

addClass和removeClass是jquery函数。它们不适用于纯JavaScript。

使用JavaScript中的添加函数添加类：

getDetails.classList.add（＆＃34;运行结束＆＃34）;

使用JavaScript删除类： getDetails.className =＆＃34;＆＃34 ;;

如果你想维护一些类，那么使用add。再次添加它们。

使用带有jquery的html创建侧边菜单

2 个答案: