jQuery classList.toggle无法正常工作

时间：2016-05-10 15:24:00

标签： css toggleclass

我是javascript的新手，我点击按钮时试图让2个功能正常工作;  第一个功能是将菜单按钮转换为＆＃34; X＆＃34; （典型的3行菜单图标）

第二个功能是TranslateX #mobileMenu，因此它从左侧进入屏幕。

第一个函数效果很好，但是菜单的翻译没有做任何事情，我检查开发人员工具并且正在应用类但菜单没有翻译。

守则。

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正在应用于{{1但是没有任何反应，我在控制台上没有错误。

1 个答案:

答案 0 :(得分：2)

您需要更改以下内容：

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

相关问题
最新问题