Блог

Я работаю над веб-сайтом с использованием bootstrap, но я не уверен, как скрыть и отобразить текст:

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

вот правильный код

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>
  

Два небольших изменения,

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>