Question

我正在开发一个响应式网站，当点击汉堡包时，会显示一个nav ul，但是当我第二次点击汉堡包时，我无法将列表显示设置为无。

HTML

<div class=""container hamburger" onclick="toggleHamburger(this)" id="hamburger">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
</div>
<ul class="col-m-9 navlist" id="navlist">
    <li><a id="HTML" href="#">HTML</a></li>
    <li><a id="CSS" href="#">CSS</a></li>
    <li><a id="JS" href="#">JS</a></li>
    <li><a id="FAQ" href="#">FAQ</a></li>
    <li><a id="About" href="#">About</a></li>

JS

function toggleHamburger(hamburg) {
    hamburg.classList.toggle("change");
    displayNavList();
}
function displayNavList(){
    var navList = document.getElementById("navlist");
    navList.style.display = "block";
}

所以，基本上我想知道如果在第二次点击汉堡包时JS中有任何方法可以调用另一个函数。在AdiCodes上查看问题，使用汉堡包，它可以打开导航列表但无法关闭它。

Answer 1

这是你想要达到的目标吗？还是我误解了这个问题？

var hamburger = document.querySelector('#hamburger'),
navList = document.querySelector('#navlist');


var toggleNav = function() {
  hamburger.classList.toggle('js-active')
  navList.classList.toggle('js-active')
}
hamburger.addEventListener('click', toggleNav)

#hamburger {
 color: red;
}

.js-active#hamburger {
color: green;
}

#navlist {
  display: none;
}

.js-active#navlist {
  display: block;
}

<div class="container hamburger" id="hamburger">
 HAMBURGER
</div>
<ul class="col-m-9 navlist" id="navlist">
    <li><a id="HTML" href="#">HTML</a></li>
    <li><a id="CSS" href="#">CSS</a></li>
    <li><a id="JS" href="#">JS</a></li>
    <li><a id="FAQ" href="#">FAQ</a></li>
    <li><a id="About" href="#">About</a></li>
</ul>

Answer 2

您可以定义全局计数器

var count = 0;

首次点击它会显示导航，第二次切换。

＆＃13;

var count = 0;
function toggleHamburger(hamburg) {
    if(count >= 1){
      var navList = document.getElementById("navlist");
      navList.style.display = "none";
    }else{
      hamburg.classList.toggle("change");
      displayNavList();
    }
    count ++;
}
function displayNavList(){
    var navList = document.getElementById("navlist");
    navList.style.display = "block";
}

＆＃13;

<div class="container hamburger" onclick="toggleHamburger(this)" id="hamburger">
    <div class="bar1">test</div>
    <div class="bar2">test</div>
    <div class="bar3">test</div>
</div>
<ul class="col-m-9 navlist" id="navlist" style="display: none;">
    <li><a id="HTML" href="#">HTML</a></li>
    <li><a id="CSS" href="#">CSS</a></li>
    <li><a id="JS" href="#">JS</a></li>
    <li><a id="FAQ" href="#">FAQ</a></li>
    <li><a id="About" href="#">About</a></li>

＆＃13;

Answer 3

为什么不用类显示/隐藏列表，然后您也可以在点击处理程序中切换该类：

function toggleHamburger(hamburg) {
    hamburg.classList.toggle("change");
    var navList = document.getElementById("navlist");
    navList.classList.toggle("shown");
}

使用CSS：

#navlist:not(.shown) {
    display: none;
}

如何在汉堡包上第二次点击导航ul显示为无？

3 个答案: