javascript - 使用 jQueryUI Accordion 并在它更改为在新的 "pane"内执行时触发事件

Question

JSFiddle 链接:

http://jsfiddle.net/dqkZN/32/

---

相关代码如下:

<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.
   }
});

Answer 1

新 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);
 }
});