<a href onClick> wenn Funktion

Ich weiß nicht wirklich, wie ich diese if-Anweisung angehen soll. Ich möchte das Seitenmenü beim Klicken öffnen und es bei erneutem Klicken schließen. Dies ist der Code, den ich für das Öffnen und Schließen habe:<a href onClick> wenn Funktion

<script> 

    /* Set the width of the side navigation to 250px */ 
function openNav() { 
    document.getElementById("mySidenav").style.width = "250px"; 
} 

/* Set the width of the side navigation to 0 */ 
function closeNav() { 
    document.getElementById("mySidenav").style.width = "0"; 
} 

</script>

Ich habe versucht, mit if-Anweisung, aber ich bin nicht sicher, wie zu definieren „wenn a href gleich ist, zu öffnen, dann schließen“.

Dies ist a href:

<ul> 
    <li><a href="#" id="up" onClick="openNav()" >Menu</a></li> 
</ul>

ich auch müde Toggle jQuery zu verwenden, aber der Link nicht reagierte.

$(document).ready(function(){ 
    $("#up").click(function(){ 
     $("#mySidenav").toggle(); 
    }); 
});

Jede Hilfe wird geschätzt.

Quelle

2017-03-05 Filip5

Können Sie eine Geige oder Code-Snippet mit dem, was Sie versucht haben - können wir nicht Ihre HTML-Struktur erraten, um bessere Lösungen zu bieten –

Ich habe versucht, toggle, die didn arbeite nicht. Ich sehe keinen Sinn darin, das zu einer Geige hinzuzufügen. All die benötigte HTML ist hier glaube ich. – Filip5

ich brauche, um zu bestätigen, dass u die jquery Bibliotheksdatei auf Ihrer Seite aufgenommen hat. => – Jana

Dies funktioniert:

$(document).ready(function() { 
 
     $("#up").click(function(e) { 
 
      e.preventDefault(); 
 
      $("#mySidenav").toggle() 
 
     }); 
 
});

#mySideNav { 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="mySidenav"> 
 
    my side nav 
 
</div> 
 
<button id="up">toggle</button>

Quelle

2017-03-05 09:57:01

ich ihm dem ursprünglichen Skript hinzugefügt hatte: \t /* die Breite der Seiten zu auf 250px */ Funktion openNav() { document.getElementById ("mySidenav"). style.width = "250px"; } /* Legen Sie die Breite der Seitennavigation auf 0 */ Funktion closeNav() { Dokument.getElementById ("mySidenav"). style.width = "0"; } Jetzt muss ich nur den Übergang lösen. – Filip5

Sie können Inline-javascript Funktion so nennen:

<ul> 
    <li><a href="javascript:openNav();" id="" >Menu</a></li> 
</ul>

Quelle

2017-03-05 09:50:16

Hallo gibt es ein kleines Problem, das ich in Ihrem jQuery-Code zu sehen. Wenn Sie auf ein Element klicken, sollten Sie zuerst den Standard mit entfernen. e.preventDefault()

der Code wird

$(document).ready(function(){ 
    $("#up").click(function(e){ 
e.preventDefault(); 
     $("#mySidenav").toggle();

Quelle

2017-03-05 09:51:46

Statt zwei Funktionen zum Schließen und Öffnen nav zu schaffen. Sie können die Klasse wechseln und mit CSS ein-/ausblenden. Auf diese Weise werden Sie die Seitenleistung erhöhen und alles in CSS und nicht in JS behandeln.

var btn = document.querySelector('button'); 
 
var nav = document.querySelector('nav'); 
 

 
btn.addEventListener('click', toggleNav); 
 

 
function toggleNav() { 
 
    nav.classList.toggle('open'); 
 
}

nav { 
 
    background-color: steelblue; 
 
    color: #fff; 
 
    display: inline-block; 
 
    padding: 5px; 
 
    border-radius: 4px; 
 
    transform: translateX(-1000%); 
 
    transition: all 0.7s; 
 
} 
 

 
nav.open { 
 
    transform: translateX(0); 
 
}

<nav> 
 
    This is your nav 
 
</nav> 
 

 
<button> 
 
Show/Hide Nav 
 
</button>

Quelle

2017-03-05 09:57:03

in openNav, ändern Sie die Bindung Klickfunktion zu closeNav. Ändern Sie in closeNav die Bindungsklickfunktion in openNav. Es bedeutet, dass die Binding-Funktion geändert wird, während der Nav geändert

Quelle

2017-03-05 10:09:49

<a href onClick> wenn Funktion

Antwort

Verwandte Themen