Disclaimer: This is a question from a 'python coder learning jQuery'.
I have the following simple html structure (filename: index.html):
<!DOCTYPE html>
<html>
<head>
<title>astrobox.io | Welcome!</title>
<script type="text/javascript" src="/Users/iMacHome/astroboxio/script.js"></script>
<link rel="stylesheet" type="text/css" href="/Users/iMacHome/astroboxio/stylesheet.css"></link>
</head>
<body>
<div class="panel">
<br />
<br />
<p>Welcome!</p>
</div>
<p class="slide"><div class="pull-me">astrobox.io</div></p>
</body>
</html>
This links to the following .js script (filename: script.js):
$(document).ready(function() {
$('.pull-me').click(function(){
$('.panel').slideToggle('slow')
});
});
And just for completeness, here is my .css file (filename: stylesheet.css):
body {
margin:0 auto;
padding:0;
width:800px;
text-align:center;
}
.pull-me{
-webkit-box-shadow: 0 0 8px #562cd4;
-moz-box-shadow: 0 0 10px #562cd4;
box-shadow: 0 0 10px #562cd4;
cursor:pointer;
}
.panel {
background: #000000;
background-size:90% 90%;
height:380px;
display:none;
color:#ffffff;
font-family:basic,arial,sans-serif;
}
.panel p{
text-align:center;
}
.slide {
margin:0;
padding:0;
border-top:solid 2px #562cd4;
}
.pull-me {
display:block;
position:relative;
right:-25px;
width:150px;
height:20px;
font-family:basic,arial,sans-serif;
font-size:14px;
color:#ffffff;
background:#562cd4;
text-decoration:none;
-moz-border-bottom-left-radius:5px;
-moz-border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
.pull-me p {
text-align:center;
}
Now, I have all three of these scripts all within the same directory and upon opening the index.html file into safari and Google chrome, the toggle down functionality does not work. It worked on testing...
Can anyone perhaps shed some light as to why this could possibly be happening. Better still, if you can spot the problem or why it isn't working that would be excellent.
Aucun commentaire:
Enregistrer un commentaire