单击菜单时隐藏项目

Question

我想在单击汉堡按钮时隐藏一个元素。 （要隐藏的元素见 CaptureElementNoDisplay.PNG）

当我再次单击汉堡按钮关闭菜单时，我想重新显示该项目。

当我显示菜单时，我设法隐藏了带有徽标的介绍元素。 （参见 CaptureElementNoDisplay.PNG）

但我无法再次显示包含中间标志的介绍的 div。 （参见 CaptureElementNoMoreDisplay.PNG）

网站链接：https://adding.hm-dev.com/1/

这里是源代码。

源代码 HTML：

<nav class="navbar navbar-dark justify-content-end" style="background-color: #0145FF;">
           
<button id="home" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> <span class=" navbar-toggler-icon "></span>
</button></nav>

<section id="intro1" style="height: 652px;background-color: #0145FF; ">

<div class="center logo-intro-1">
<img src="./assets/images/logo_adding.png " alt=" " width="450 ">
</div>

<ul class="nav flex-column text-right pr-5">
<li class="nav-item">
<a class="nav-link2 text-white" href="">Black</a></li>
<li class="nav-item"><a class="nav-link2 text-white" href="#">Red</a></li>
<li class="nav-item"><a class="nav-link2 text-white" href="#">Violet</a></li>
<li class="nav-item"><a class="nav-link2 text-white" href="#">Blue</a></li>
<li class="nav-item"><a class="nav-link2 text-white" href="#">Green</a></li></ul>
</section>

源代码 JavaScript ：

$('.navbar-toggler').click(function() {
var booleanNoDisplay = true;
var intro1 = document.getElementById("intro1");
intro1.classList.add("NoDisplay");


    if (booleanNoDisplay) {
        console.log('ok TRUE');
        $('#intro1').show(); // This line is not useful because the element is already displayed by default
        booleanNoDisplay = false; //I don't know when to set the value to false...
    }


    if (!booleanNoDisplay) {
        console.log('ok false');
        $('#intro1').hide();
        intro1.classList.add("display-block");

        booleanNoDisplay = true;
    }
});

你知道问题出在哪里吗？

提前感谢您的帮助。

Answer 1

你需要把var booleanNoDisplay移出你的click语句，然后你还需要把if (!booleanNoDisplay) {转换成一个else if语句，比如 else if (!booleanNoDisplay) {

演示

var booleanNoDisplay = true;
$('.navbar-toggler').click(function() {
  var intro1 = document.getElementById("intro1");
  intro1.classList.add("NoDisplay");

  if (booleanNoDisplay) {
    console.log('ok TRUE');
    $('#intro1').show(); // This line is not useful because the element is already displayed by default
    booleanNoDisplay = false; //I don't know when to set the value to false...
  } else if (!booleanNoDisplay) {
    console.log('ok false');
    $('#intro1').hide();
    intro1.classList.add("display-block");

    booleanNoDisplay = true;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-dark justify-content-end" style="background-color: #0145FF;">

  <button id="home" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> <span class=" navbar-toggler-icon "></span>
</button></nav>

<section id="intro1" style="height: 652px;background-color: #0145FF; ">

  <div class="center logo-intro-1">
    <img src="./assets/images/logo_adding.png " alt=" " width="450 ">
  </div>

  <ul class="nav flex-column text-right pr-5">
    <li class="nav-item">
      <a class="nav-link2 text-white" href="">Black</a></li>
    <li class="nav-item"><a class="nav-link2 text-white" href="#">Red</a></li>
    <li class="nav-item"><a class="nav-link2 text-white" href="#">Violet</a></li>
    <li class="nav-item"><a class="nav-link2 text-white" href="#">Blue</a></li>
    <li class="nav-item"><a class="nav-link2 text-white" href="#">Green</a></li>
  </ul>
</section>

Answer 2

要点

• 如果布尔值在 click 事件处理程序中，则每次用户单击按钮时，该变量都会为 true，因为总是被初始化。

• 您在哪里添加一个类：intro1.classList.add("NoDisplay"); 每次执行该方法时都会使事情复杂化。完全没有必要。

• 布尔变量名比较混乱，我改成IsDisplayed

• Else if 不是必需的，因为只有两个场景。

试试下面的代码

var IsDisplayed = true;

$('.navbar-toggler').click(function() {
  
  var intro1 = document.getElementById("intro1");

  if(IsDisplayed){
     $('#intro1').hide();
     IsDisplayed = false;
  } else {
     $('#intro1').show();
     IsDisplayed = true;
  }
 
});

Answer 3

我通过稍微修改我的代码来重现您的代码逻辑。从现在开始，我使用 .toggle()。我看是一样的。我只需要在我的 style.css 文件中声明一些属性。

这是我的 JavaScript 代码：

var isDisplayed = true;

$('.navbar-toggler').click(function() {

    var intro1 = document.getElementById("intro1");

    if (isDisplayed) {
        console.log('ok TRUE');
        //$('#intro1').hide(); 
        intro1.classList.toggle("noDisplayElement");
        isDisplayed = false;
    } else if (!isDisplayed) {
        console.log('ok false');
        //$('#intro1').hide();
        intro1.classList.toggle("displayElement");
        isDisplayed = true;
    }
});

这是我的 CSS 代码：

.noDisplayElement {
        display: none!important;
    }
    
    .displayElement {
        display: block!important;
    }

现在它几乎可以满足我的需求了。

也就是说，当我在左上角的导航菜单上单击 3 次时，它会显示菜单和包含 intro1 的 div。我认为问题来自条件。你会建议做什么？

你可以在网站的链接上看到结果：https://adding.hm-dev.com/1/