Question

我有一个导航菜单，使用按钮的FA图标（fa-bars）和隐藏的菜单面板，单击时淡入/淡出。这工作正常，但我想同时添加/删除图标类。（更改为fa-times）我已经创建了一个函数来执行此操作并尝试在相同的单击事件中运行它，但是，它没有＆＃39;似乎工作。代码如下：

HTML

             <header>
       <a class="brand" href="index.html"><img src="images/logo.png"><a/>
       <a class="js-btn"><i class="fa fa-bars"></i></a>
       </header>
      <nav id="primary_nav">
         <ul>
          <li><a href="index.html">Home</a></li>
         <li><a href="about.html">About</a></li>
         <li><a href="app.html">Silent Salesman</a></li>
         <li><a href="">Dropdown</a></li>
         <li><a href="">Services</a></li>
         <li><a href="">Contact</a></li>
         <li><a href="">About Me</a></li>
         <li><a href="">Contact</a></li>
        </ul>
 </nav><!--end primary_nav-->

JAVASCRIPT

function openCloseMenu() {
 if(el.classList.contains('is-hidden')){
    fadeIn(el);
  }
  else {
    fadeOut(el);
  }
}
function alterClass(
 m.classList.add('fa-bars'); 
if (m.classList.contains('fa-bars')) {
    m.classList.remove('fa-bars');
    m.classList.add('fa-times');
  } else {
    m.classList.remove('fa-times');
    m.classList.add('fa-bars');
  }
}
var btn = document.querySelector('.js-btn');
var el = document.querySelector('#primary_nav');
var m = document.querySelector(".fa-bars");
btn.addEventListener('click', function(e){
openCloseMenu();
alterClass();
});

就目前而言，只需在btn事件中运行openCloseMenu（）函数即可，但是当我尝试运行alterClass（）函数时，它也不能正常工作。第一次单击会更改图标上的类，但是您必须再次单击它以打开面板（并且您单击关闭按钮以打开它，当它应该是fa-times时会更改为fa-bars）面板打开/关闭/淡出功能正常。

欢迎任何提示，谢谢

添加/删除类FA Icon Javascript

0 个答案: