Jump to content
Please Use CODE Tags

JQuery toogleClass problem

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

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
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 comment
Share on other sites
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 comment
Share on other sites
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 comment
Share on other sites
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 comment
Share on other sites
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 comment
Share on other sites
Link to post
Share on other sites
Posted
2 minutes ago, robeng said:

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

yep i just stuck them in there in case something was wrong with my typing

             ☼

ψ ︿_____︿_ψ_   

Link to comment
Share on other sites
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

×