Bonbin Bonbin - 1 month ago 10
CSS Question

Jquery click listener not firing (html,css,jquery)

I have this script in the head of the html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
$(function () {
$('.nav-toggle').on('click',function(){
$('.mainnav').toggleClass('open');
});
});
</script>


which should fire when:

<header>
<img class="nav-toggle" src="static/images/menunav.png" style="cursor: pointer;">
</header>


this image is clicked.

and toggle the subclass open in:

<ul class="text mainnav">
<li>Home</li>
<li>Projects</li>
<li>Techniques</li>
<li>About me</li>
</ul>


But it wont fire the .open class? What am i doing wrong here (first time jquery user).

CSS:

.nav-toggle {
float: right;
margin-right: 70px;
}

.mainnav{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #222;
text-align: center;
list-style: none;
display: inline-block;
transform: translateX(-100%);
transition: transform 0.6s ease;
}

.mainnav.open {
transform: translateX(50%);
}

Answer

I guess the problem is in the html. Try to split

<script src="[JQuery CDN]"></script>
<script>
$(function(){ ... });
</script>
Comments