Jump to content
Please Use CODE Tags

JQuery toogleClass problem

robeng
By robeng
in Programming
 Share
Go to solution Solved by fjdhdhcyfhf,

i think your code is not being run at page load. try this 

$(document).ready(function(){
alert("this works on load");
//JQuery
$("#menu").click(function(event){
	$("nav ul").toggleClass("menushow");
});
alert("if this alert doesnt load there is a error in syntax above");

}

 

Posted

Hi! I have a problem with my website. Basicly I want to make a menu that drops down if you click on "menu". My nav looks like this: 

<nav class="col-12 col-m-12">
			<ul>
				<li id="menu"><a href="#">Meny</a></li>
				<li><a href="#">Försörjning</a></li>
				<li><a href="#">Kultur och rekreation</a></li>
				<li><a href="#">Transport-lösningar</a></li>
				<li><a href="#">Jobb och handel</a></li>
				<li><a href="#">IT-kommunikation</a></li>
				<li><a href="#">Återvinning</a></li>
			</ul>
		</nav>

When I click the list item at top I want it to set a class to "nav ul" called "menushow". I have tested to manualy add the class through the inspector and it works. But my JQury code does't want to work... Here is my JQuery code: 

//JQuery
$("#menu").click(function(){
	$("nav ul").toggleClass("menushow");
});

The problem is that it wont toggle the class to nav ul. Any help would be amazing!

Link to comment
https://linustechtips.com/topic/722742-jquery-toogleclass-problem/
Share on other sites
Link to post
Share on other sites
Posted

out of habit i use function(event) where you have function() if that makes a difference.

where have you placed the <script> tags?

are you loading this js in: $(document).ready(function(){ }

             ☼

ψ ︿_____︿_ψ_   

Link to post
Share on other sites
Posted
  • Author
4 minutes ago, SCHISCHKA said:

out of habit i use function(event) where you have function() if that makes a difference.

where have you placed the <script> tags?

are you loading this js in: $(document).ready(function(){ }

I don't know if this is what you are looking for. 

<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/mainstil.css">
	<script type="text/javascript" src="script/bildspel.js"></script>
	<script type="text/javascript" src="script/menu.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
	<meta charset="utf-8">

	<title>Titel här</title>
</head>

But i load JQuery from Google CDN and the JQuery code is all the code...

Link to post
Share on other sites
Posted
  • Author
5 minutes ago, SCHISCHKA said:

out of habit i use function(event) where you have function() if that makes a difference.

where have you placed the <script> tags?

are you loading this js in: $(document).ready(function(){ }

I tried changing it to: 

//JQuery
$("#menu").click(function(event){
	$("nav ul").toggleClass("menushow");
});

But it still wont work

Link to post
Share on other sites
Posted
  • Solution

i think your code is not being run at page load. try this 

$(document).ready(function(){
alert("this works on load");
//JQuery
$("#menu").click(function(event){
	$("nav ul").toggleClass("menushow");
});
alert("if this alert doesnt load there is a error in syntax above");

}

 

             ☼

ψ ︿_____︿_ψ_   

Link to post
Share on other sites
Posted
  • Author
2 minutes ago, SCHISCHKA said:

i think your code is not being run at page load. try this 


$(document).ready(function(){
alert("this works on load");
//JQuery
$("#menu").click(function(event){
	$("nav ul").toggleClass("menushow");
});
alert("if this alert doesnt load there is a error in syntax above");

}

 

Oh. Thank you! That worked! So can i just remove the alerts and keep the rest?

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×