jquery-ui - 如何捕捉 JQuery UI 手风琴点击事件？

Question

我正在使用 jquery UI 的手风琴。当用户切换标签时，我需要隐藏一些图像。我尝试了几种不同的方法（http://api.jqueryui.com/accordion/#event-beforeActivate），但它不起作用：

HTML：

<div id="accordion">
 <h3>
  <a href="#">
    <span class="menu-item">About</span>
    <img id="slide1" src="/images/sliding-image_1.png"/>
  </a>
 </h3>
 <div>
  .................
 </div>

 <h3><a href="#">................

JS：

 <script>
 $( "#accordion" ).accordion({ beforeActivate: function( event, ui ) 
                                    {
                                    ui.newHeader.click(function () {
                                        $('#slider1').remove();
                                                      }  
                                    }

               });
</script>

或者另一个：

<script>
$("#accordion").accordion({
  beforeActivate: function(event, ui) {
   if(ui.newHeader) {
    $('h3 a img').remove();
                    }
                                      }
                          });
</script>

Answer 1

这是你想要的...

$( "#accordion" ).accordion({
    beforeActivate: function( event, ui ) {
        if(ui.newHeader) {
            $(ui.newHeader).find('img').hide();
            $(ui.oldHeader).find('img').show();
        }
    }
});

小提琴

Answer 2

你正在寻找

h3.ui-accordion-header.ui-state-active

如果它是主干，代码将如下所示：

events: {
   'click h3.ui-accordion-header.ui-state-active': 'someFunction'
}

Answer 3

问题不在脚本中。问题在于它的位置。所有这些脚本都可以正常工作。

我写了这个：

<script>
  $(document).ready(function(){
   ----------------------------
   Create Accordion
   ----------------------------
  });
</script>

以及以下：

<script>
  $(document).ready(function(){
   ----------------------------
    beforeActivate event
   ----------------------------
  });
</script>

由于某种原因，第二个脚本在第一个脚本之前加载并且没有看到创建的手风琴。所以工作脚本是：

<script>
  $(document).ready(function(){
   ----------------------------
   Create Accordion
   ----------------------------
   ----------------------------
   beforeActivate event
   ----------------------------
  });
</script>

或者：

<script type="text/javascript">
$(document).ready(function(){
var icons = {
    header: "ui-icon-carat-2-n-s",
    headerSelected: ""
};
$("#accordion").accordion({ active:false },{collapsible:true},{icons:icons},{autoHeight:false});

  $("#accordion").accordion(
   {
    beforeActivate: function(event, ui) 
    { 
     $('h3 a img').stop(true); 
     $('h3 a img').fadeOut("medium"); 
    }
   });

});
</script>