完全な Jquery noob です。ここでホストされています: mySite
興味深いのはフッターです。サイトマップを押して、フッターをうまく展開して、それが行っている素敵なサイトマップを表示したいと思います. サイトマップのボタンを閉じるボタンに変更したい。
replaceWith() を使用するとボタンがうまく変更されますが、新しい HTML を使用して何もできません。まったく応答しません。toggleClass() などを試して、1時間半苦労しましたが、動作しません。締めくくりの方法で私が台無しにしたかもしれない他のことは気にせず、自分でそれを学ぶことを好みます.
乾杯。
<script>
$(document).ready(function(){
$(".siteMap").click(function(){
$("#footer").animate({
height: '150px'
}, 1000);
$("#table").fadeIn('20000');
$(".siteMap").replaceWith('<span class="close"><a>CLOSE</a></span>')
}); // end .click
$(".close").click(function(){
$("#footer").css('height', '25px');
$("#table").fadeOut('20000');
$(".close").replaceWith('<span class="siteMap"><a>SITE MAP</a></span>');
}); // end .click
}); // end .ready
</script>
<div id="footer">
<div id="table">
<table width="100%">
<tr>
<td><a href="#">Link One</a></td>
<td><a href="#">Link One</a></td>
<td><a href="#">Link One</a></td>
<td><a href="#">Link One</a></td>
<td><a href="#">Link One</a></td>
</tr>
<tr>
<td><a href="#">Link One</a></td>
<td><a href="#">Link One</a></td>
<td><a href="#">Link One</a></td>
<td><a href="#">Link One</a></td>
<td><a href="#">Link One</a></td>
</tr>
<tr>
<td><a href="#">Link One</a></td>
<td><a href="#">Link One</a></td>
<td><a href="#">Link One</a></td>
<td><a href="#">Link One</a></td>
<td><a href="#">Link One</a></td>
</tr>
<tr>
<td><a href="#">Link One</a></td>
<td><a href="#">Link One</a></td>
<td><a href="#">Link One</a></td>
<td><a href="#">Link One</a></td>
<td><a href="#">Link One</a></td>
</tr>
<tr>
<td><a href="#">Link One</a></td>
<td><a href="#">Link One</a></td>
<td><a href="#">Link One</a></td>
<td><a href="#">Link One</a></td>
<td><a href="#">Link One</a></td>
</tr>
</table>
</div>
<span id="home"><a href="#">HOME</a></span>
<span id="top"><a href="#banner">TOP</a></span>
<span class="siteMap"><a>SITE MAP</a></span>
</div>
#table{
display: none;
z-index: 999;
}
#table table{
border: 0;
}
#table td{
border: 0;
}
#footer{
padding: 5px;
height: 25px;
border: 1px solid #ff0000;
border-radius: 20px;
margin: auto;
text-align: center;
background: url('../images/backgroundNavy.jpg') top left;
background-repeat: repeat-x;
}
#footer a{
text-decoration: none;
color: white;
font-size: 15px;
font-family: proxima;
font-weight: bold;
}