Hy! Je voudrais utiliser ce code simple mais cela ne fonctionne pas. Il y a deux autres scripts JS ci-dessous, peuvent-ils interférer l'un avec l'autre? Merci d'avance.

<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> 
-1
Giorgia 6 nov. 2019 à 15:46

3 réponses

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
Bahador Raghibizadeh 6 nov. 2019 à 13:32

En utilisant var x = document.getElementById("mySidenav");, cela fonctionne pour moi, veuillez fournir plus de détails sur les erreurs que vous rencontrez. Quel navigateur utilisez-vous? Que montre la console?

0
Andrew 6 nov. 2019 à 13:32

Vous avez fait une faute de frappe ici:

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

Ça devrait être:

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

J'espère que cela a aidé!

0
TheMichael 6 nov. 2019 à 12:53