jQuery classList.toggle 工作不正常

Question

我是 javascript 的新手，我正在尝试让 2 个函数在单击按钮时起作用；第一个功能是将菜单按钮转换为 "X"（典型的 3 行菜单图标）

第二个函数是，TranslateX #mobileMenu 所以它从左边进入屏幕。

第一个功能很好用，但是菜单的翻译没有做任何事情，我检查了开发者工具并且正在应用 class 但菜单没有翻译。

代码。

HTML

<div id="mobileNavContainer">
    <a class="mobileNavLogo" href=""><img src="assets/img/Logo40x40.png" alt=""/></a>
    <div id="mobile_button">
       <div class="mobile_button_lines1"></div>
       <div class="mobile_button_lines2"></div>
       <div class="mobile_button_lines3"></div>
    </div>
    <div id="mobileMenu">
       <ul id="mobileLinks">
          <li><a href="">WEB</a></li>
          <li><a href="">GRAFICO</a></li>
          <li><a href="">FOTOGRAFIA</a></li>
          <li><a href="">PORTAFOLIO</a></li>
          <li><a href="">NOSOTROS</a></li>
          <li><a href="">CONTACTO</a></li>
       </ul>
       <ul id="mobileSocialIcons">
          <li><a href=""><img src="assets/img/nav-facebook-icon.png" alt=""/></a></li>
          <li><a href=""><img src="assets/img/nav-twitter-icon.png" alt=""/></a></li>
          <li><a href=""><img src="assets/img/nav-instagram-icon.png" alt=""/></a></li>
       </ul>
    </div>
</div>

CSS

#mobileMenu{
  display: block;
  position: relative;
  background-color: rgb(230, 231, 232);
  width: 170px;
  transition: all 0.3s ease-in-out;
  transform: translateX(-100%);
}

.showMenu #mobileMenu{
  display: block;
  transform: translateX(0);
}

#mobile_button{
  position: fixed;
  display: block;
  width: 50px;
  height: 60px;
  float: right;
  right: 5px;
  cursor: pointer;
  z-index: 1;
}

.mobile_button_lines1{
  max-width: 70%;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
  height: 2px;
  background-color: rgb(88, 88, 91);
  margin-top: 18px;
  border-radius: 2px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.mobile_button_lines2, .mobile_button_lines3{
  max-width: 70%;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
  height: 2px;
  background-color: rgb(88, 88, 91);
  margin-top: 9px;
  border-radius: 2px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.show .mobile_button_lines1 {
  -webkit-transform: rotate(45deg) translate(11px, 5px);
  transform: rotate(45deg) translate(11px, 5px);
}

.show .mobile_button_lines2 {
  opacity: 0;
}

.show .mobile_button_lines3 {
  -webkit-transform: rotate(-45deg) translate(10px, -5px);
  transform: rotate(-45deg) translate(10px, -5px);
}

JS

var mobileButtonTransform = document.getElementById('mobile_button');
mobileButtonTransform.addEventListener('click',function(){
  mobileButtonTransform.classList.toggle('show');
})

var mobileMenuShow = document.getElementById('mobileMenu');
mobileButtonTransform.addEventListener('click',function(){
  mobileMenuShow.classList.toggle('showMenu');
})

我不知道为什么 translateX 在点击时不起作用，第一个功能运行完美，在 Chrome 的开发者工具上我可以看到 .showMenu 正在应用到 #mobileMenu，但没有任何反应，我在控制台上没有收到任何错误。

Answer 1

您需要更改以下内容：

.showMenu #mobileMenu {
  display: block;
  transform: translateX(0);
 }

至：

 #mobileMenu.showMenu {
  display: block;
  transform: translateX(0);
}

正如您所说，JavaScript 运行正常，没有错误是真的。它无法正常运行的原因是您没有为此选择合适的选择器：

mobileMenuShow.classList.toggle('showMenu');

片段

我更改了所有的名字，因为原来的名字很难理解。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#mobList{
  display: block;
  position: relative;
  background-color: rgb(230, 231, 232);
  width: 170px;
  transition: all 0.3s ease-in-out;
  transform: translateX(-100%);
}

#mobList.listOn {
  display: block;
  transform: translateX(0);
}

#mobBtn{
  position: fixed;
  display: block;
  width: 50px;
  height: 60px;
  float: right;
  right: 5px;
  cursor: pointer;
  z-index: 1;
}

.mobBtnL1{
  max-width: 70%;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
  height: 2px;
  background-color: rgb(88, 88, 91);
  margin-top: 18px;
  border-radius: 2px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.mobBtnL2, .mobBtnL3{
  max-width: 70%;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
  height: 2px;
  background-color: rgb(88, 88, 91);
  margin-top: 9px;
  border-radius: 2px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.btnOn .mobBtnL1 {
  -webkit-transform: rotate(45deg) translate(11px, 5px);
  transform: rotate(45deg) translate(11px, 5px);
}

.btnOn .mobBtnL2 {
  opacity: 0;
}

.btnOn .mobBtnL3 {
  -webkit-transform: rotate(-45deg) translate(10px, -5px);
  transform: rotate(-45deg) translate(10px, -5px);
}
</style>
</head>

<body>
<div id="mobNavBox">
    <a class="mobNavLogo" href=""><img src="assets/img/Logo40x40.png" alt=""/></a>
    <div id="mobBtn">
       <div class="mobBtnL1"></div>
       <div class="mobBtnL2"></div>
       <div class="mobBtnL3"></div>
    </div>
    <div id="mobList">
       <ul id="mobLnx">
          <li><a href="">WEB</a></li>
          <li><a href="">GRAFICO</a></li>
          <li><a href="">FOTOGRAFIA</a></li>
          <li><a href="">PORTAFOLIO</a></li>
          <li><a href="">NOSOTROS</a></li>
          <li><a href="">CONTACTO</a></li>
       </ul>
       <ul id="mobSocIco">
          <li><a href=""><img src="assets/img/nav-facebook-icon.png" alt=""/></a></li>
          <li><a href=""><img src="assets/img/nav-twitter-icon.png" alt=""/></a></li>
          <li><a href=""><img src="assets/img/nav-instagram-icon.png" alt=""/></a></li>
       </ul>
    </div>
</div>
<script>
var mobBtnTran = document.getElementById('mobBtn');
mobBtnTran.addEventListener('click',function(){
  mobBtnTran.classList.toggle('btnOn');
})

var mobListbtnOn = document.getElementById('mobList');
mobBtnTran.addEventListener('click',function(){
  mobListbtnOn.classList.toggle('listOn');
})
</script>
</body>
</html>

jQuery classList.toggle 工作不正常

jQuery classList.toggle not working properly

css

toggleclass

片段