在用户单击时隐藏和显示文本

Question

我正在使用引导程序开发一个网站，但我不确定如何隐藏和显示文本：

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
            <a class="navbar-brand" href="#">Navigate:</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="price.html">Pricing</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="contact.html">Contact Us</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                    </li>
                </ul>
              </div>
        </nav>

如果您查看<a class="navbar-brand" href="#">Navigate:</a>，我只想在用户切换菜单以使其下拉时显示它。当他们试图解开它时，它会隐藏起来。 TL;DR，Navigate: 仅在下拉菜单时出现。

我尝试做这样的事情却失败了：

<script>
        function display(){
            if(document.getElementById("navbar-brand").style.display == "none"){
                document.getElementById("navbar-brand").style.display = "inline"
            }
            if(document.getElementById("navbar-brand").style.display == "inline"){
                document.getElementById("navbar-brand").style.display = "none"
            }
        }
        </script>

    <a class="navbar-brand" href="#">Navigate:</a>
        <button class="navbar-toggler" on-click="display()" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle 
navigation">

Answer 1

这是正确的代码

https://jsfiddle.net/moti013/rfk69w7n/4/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
    function display(){
        if(document.getElementById("navbar-brand").style.display == "none"){
            document.getElementById("navbar-brand").style.display = "inline"
        }
        if(document.getElementById("navbar-brand").style.display == "inline"){
            document.getElementById("navbar-brand").style.display = "none"
        }
    }
    </script>
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">Navigate</button>
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="price.html">Pricing</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="contact.html">Contact Us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
        </ul>
      </div>
</nav>

Answer 2

两个小改动，

1 - 在您的代码中添加以下脚本

2 - 修改按钮标签，在其上添加onclick="toggle()"。

function toggle() {
  if (document.getElementsByClassName('navbar-toggler')[0].getAttribute('aria-expanded') !== 'true') {
    document.getElementsByClassName('navbar-brand')[0].style.visibility = 'visible';
    console.log(false)
  } else {
    console.log(true)
    document.getElementsByClassName('navbar-brand')[0].style.visibility = 'hidden'
  }
}

window.onload = () => {
  if (document.getElementsByClassName('navbar-toggler')[0].getAttribute('aria-expanded') === 'true') {
    document.getElementsByClassName('navbar-brand')[0].style.visibility = 'visible';
    console.log(false)
  } else {
    console.log(true)
    document.getElementsByClassName('navbar-brand')[0].style.visibility = 'hidden'
  }
}

<button onclick="toggle()" class="navbar-toggler" type="button" data-toggle="collapse"
  data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
  aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>