Question

我正在使用jquery UI的Accordion。当用户切换标签时，我需要隐藏一些图像。我尝试了几种不同的方法（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

您正在寻找

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

如果它是骨干，代码看起来像这样：

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

Answer 2

这就是你要找的......

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

<强> FIDDLE

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>

OR：

<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>

如何捕获JQuery UI Accordion Click事件？

3 个答案: