Javascript переключения на CSS Навбар - PullRequest
Новая
       38

Javascript переключения на CSS Навбар

0 голосов
/ 06 ноября 2019

Hy! Я хотел бы использовать этот простой код, но он не работает. Ниже приведены еще два JS-скрипта, могут ли они мешать друг другу? Спасибо заранее. 

<nav id="mySidenav" class="sidenav">
    <!--<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>-->

    <ul>
        <li><a class="active" href="#"> <span title="Home">Home</span>  </a> </li>
        <li><a href="#Curriculum"> <span title="About">CV</span> </a> </li>
        <li><a href="#Competenze"> <span title="Competenze">Competenze</span></a></li>
        <li> <a href="#Work"> <span title="#Work">Lavori</span> </a></li>
        <li> <a href="#Contatti"> <span title="Contact">Contatti</span></a></li>
    </ul>
</nav>   

<div class="hamburger" >
    <button class="openbtn" onclick="myFunction()">
        <span id="navbs1" class="icon-bar"></span>
        <span id="navbs2" class="icon-bar"></span>
        <span id="navbs3" class="icon-bar"></span>
    </button>            
</div>


<script>
    function myFunction() {
        var x = document.getElementsByid("mySidenav");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
    }
</script>

Ответы [ 3 ]

0 голосов
/ 06 ноября 2019 

function myFunction() {
  document.getElementById("mySidenav").classList.toggle("hide");
}
.hide{
  display: none !important;
}
<nav id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="myFunction()">×</a>

    <ul>
        <li><a class="active" href="#"> <span title="Home">Home</span>  </a> </li>
        <li><a href="#Curriculum"> <span title="About">CV</span> </a> </li>
        <li><a href="#Competenze"> <span title="Competenze">Competenze</span></a></li>
        <li> <a href="#Work"> <span title="#Work">Lavori</span> </a></li>
        <li> <a href="#Contatti"> <span title="Contact">Contatti</span></a></li>
    </ul>
</nav>   

<div class="hamburger" >
    <button class="openbtn" onclick="myFunction()">
        <span id="navbs1" class="icon-bar">|</span>
        <span id="navbs2" class="icon-bar">|</span>
        <span id="navbs3" class="icon-bar">|</span>
    </button>            
</div>
0 голосов
/ 06 ноября 2019

Использование var x = document.getElementById("mySidenav"); работает для меня, пожалуйста, предоставьте более подробную информацию об ошибках, с которыми вы сталкиваетесь. Какой браузер вы используете? Что показывает консоль?

0 голосов
/ 06 ноября 2019

Вы сделали здесь опечатку: 

var x = document.getElementsByid("mySidenav");

Это должно быть: 

var x = document.getElementsById("mySidenav");

Надеюсь, это помогло!

...