Responsive Design antwortet nicht

Question

Ich bin neu in Responsive Designs und versuche, Medienabfragen zu verwenden. Ich versuche, meine Navigationsleiste mithilfe von Medienabfragen ansprechend zu gestalten. Das Problem ist, wenn ich die Seite in einer mobilen Ansicht Größe die Navigationsleiste zeigt die SPAN-Tag, aber es sollte die Menü-Liste nach dem Klicken auf. Ich habe versucht, jQuery für diesen Prozess zu verwenden. Mein Code ist unten:

HTML CODE

<span class="menu-trigger">MENU </span> 
<nav class = "nav-main">   
    <ul> 
    <li> 
     <a href = "#" class = "nav-item"> HOME</a>        
    </li> 
    <li> 
     <a href = "#" class = "nav-item">ABOUT US </a> 
    </li> 
    <li> 
     <a href = "#" class = "nav-item">PORTFOLIO </a> 
    </li> 
    <li> 
     <a href = "#" class = "nav-item">SERVICES </a> 
    </li> 
    <li> 
     <a href = "#" class = "nav-item">CONTACT US </a> 
    </li> 
    </ul> 
</nav> 

CSS CODE

.nav-main { 
    width:100%; 
    background-color: #222; 
    height:70px; 
    color:#fff; 
} 

@media screen and (max-width: 480px){  
    .menu-trigger{ 
     display:block; 
    }  
    .nav-main > ul > li{ 
     float:none; 
     border-bottom: 2px solid #d5dce4 
    } 
    .nav-main { 
     display:none; 
    }  
    .nav-main > ul > li:last-child{ 
     border-bottom: none; 
    }   
} 

JQUERY CODE

<script type ="text/javascript"> 
    jQuery(".menu-trigger").click(function(){ 
     jQuery(".nav-main").slideToggle(); 
    }); 
</script> 

Ri ght jetzt, wenn man auf mobile Größe geht, verschwindet der Inhalt nav-main und zeigt nur den SPAN an, aber wenn der SPAN angeklickt wird, soll es einen Toggle-Effekt haben, der den Rest der Liste in der Navbar anzeigt, aber nichts scheint zu passieren.

UPDATE --- JSFIDDLE - https://jsfiddle.net/k4ytvyef/

Answer 1

Ohne die Platzierung Ihrer Skripte zu sehen, kann ich nur annehmen, dass Sie die jQuery-Code über Ihre HTML-Elemente platziert haben.

Wenn Sie dies auf jsbin versuchen, funktioniert Ihr Code, wenn der jquery-Selektor das Element finden kann, nachdem er geladen wurde.

Um dies zu erreichen, ohne den Code zum unteren Rand der Seite zu verschieben, können Sie Ihr Skript mit jQuerys bereit Ereignis wickeln etwa so:

jQuery(document).ready(function() { 
    jQuery(".menu-trigger").click(function(){ 
     jQuery(".nav-main").slideToggle(); 

    }); 
}); 

Edit:

Zum Kommentar oben, warum es zu fragen funktioniert nicht auf jsfiddle:

JQuery ist nicht native Javascript. Damit dies in jeder Testumgebung funktioniert, müssen Sie die jquery-Bibliothek hinzufügen, damit sie zusammen mit Ihrem Code ausgeführt werden kann.