JSFiddle 链接:
相关代码如下:
<div class="categories">
<h3>
<img src="http://i.imgur.com/t5UXT.gif" />
<a href="#">CCTV</a>
<sub>Circuito Cerrado</sub>
</h3>
<div>
<ul>
<li><a href="#">Control de Asistencia</a></li>
<li><a href="#">Controladores de Accesso</a></li>
<li><a href="#">Controladores de Asistencia</a></li>
<li><a href="#">Chapas Electricas</a></li>
<li><a href="#">Chapas Electromagneticas</a></li>
<li><a href="#">Tarjetas de Proximidad</a></li>
</ul>
</div>
<h3>
<img src="http://i.imgur.com/TThAk.gif" />
<a href="#">ALARMAS</a>
<sub>Magellan Sprit Spectra Digiplex/Evo</sub>
</h3>
<div>
<ul>
<li><a href="#">Control de Asistencia</a></li>
<li><a href="#">Controladores de Accesso</a></li>
<li><a href="#">Controladores de Asistencia</a></li>
<li><a href="#">Chapas Electricas</a></li>
<li><a href="#">Chapas Electromagneticas</a></li>
<li><a href="#">Tarjetas de Proximidad</a></li>
</ul>
</div>
</div>
$('.categories').accordion();
$('.categories').accordion({
changestart: function(event, ui) {
$('h3 img').attr('src', 'http://i.imgur.com/TThAk.gif');
}
});
$('.categories h3 img').click(function() {
$(this).next().click();
});
当有人单击类别标题时,我想将每个图标更改为加号(意味着它已折叠),然后将新选择的 Pane 图标更改为减号。
这里是我认为我需要放置 javascript 代码的具体位置:
$('.categories').accordion({
changestart: function(event, ui) {
$('h3 img').attr('src', 'http://i.imgur.com/TThAk.gif');
//SOME CODE SHOULD GO HERE TO ACT ON "THIS" NEWLY SELECTED PANE.
}
});
最佳答案
新 fiddle http://jsfiddle.net/dqkZN/39/
这是您要找的东西吗??
var minusImgUrl = "http://i.imgur.com/t5UXT.gif",
plusImgUrl = "http://i.imgur.com/TThAk.gif";
$('.categories').accordion({
changestart: function(event, ui) {
$('h3 img').attr('src', 'http://i.imgur.com/TThAk.gif');
ui.newHeader.find("img").attr("src", minusImgUrl);
ui.oldHeader.find("img").attr("src", plusImgUrl);
}
});
关于javascript - 使用 jQueryUI Accordion 并在它更改为在新的 "pane"内执行时触发事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8766733/