Demo: http://jsfiddle.net/235ap/ http://jsfiddle.net/235ap/
在演示中您不会看到图像发生变化,但如果您查看检查器,就会发现它正在发生变化。
HTML
<ul class="nav">
<li class="header">Quick Access:</li>
<li>
<a id="itemLink" href="#">Add Item</a>
<img id="Mitemimg" class="qaimg" src="images/icon_trace.gif">
</li>
<li>
<a id="adminLink" href="#">Add Administrator</a>
<img id="menuIMG" class="qaimg" src="images/icon_trace.gif">
</li>
</ul>
<div id="main">
<h1>Actions Required:</h1>
<div id="forms">
<table id="addItem" class="linkForm" style="display: none;">
<tr>
<td>addItemTable</td>
</tr>
</table>
<table id="addAdmin" class="linkForm" style="display: none;">
<tr>
<td>addAdminTable</td>
</tr>
</table>
</div>
</div>
JS
$(document).ready(function () {
$('#adminLink').click(function(event) {
event.preventDefault();
change('#menuIMG', '#addAdmin');
});
$('#itemLink').click(function(event) {
event.preventDefault();
change('#Mitemimg', '#addItem');
});
});
function change(imgId, divId) {
// reset img src
$('.qaimg').attr('src', 'images/icon_trace.gif');
// set img src
$(imgId).attr('src', 'images/icon_sync.gif');
// slide up all
$('#forms .linkForm').slideUp('slow', function() {
// slide down div
$(divId).slideDown('slow', function() {});
});
}
在上面的功能更改中,当第二次选择链接时。它不是向上滑动,而是向上滑动,然后再向下滑动。下面是相同的函数,经过一些更改后才能正常工作。
function change(imgId, divId) {
//check to see if div is visable
var vis = ($(divId).css('display') == 'none')? false:true;
// slide up all
$('#forms .linkForm').slideUp('slow', function() { });
// reset img src
$('.qaimg').attr('src', 'images/icon_trace.gif');
// if div isn't visable
if(!vis){
// slide down div
$(imgId).attr('src', 'images/icon_sync.gif');
// set img src
$(divId).slideDown('slow', function() {});
}
}