使用jquery mobile Collapsible Widget 时绑定expand,collapse事件监听器的方法

根据官方文档，expand事件监听由expand(event,ui)来实现

expand( event, ui )Type: collapsibleexpand

Triggered when a collapsible is expanded

绑定event listener(事件监听器)到collapsibleexpand event的代码如下。

$( ".selector" ).on( "collapsibleexpand", function( event, ui ) {} );

假设我现在想在每个head 发生expand事件时改变字体颜色为red,其他时间的颜色保持为rgb(51,51,51);

html代码如下

  
  
  
  
  
  


 

  

    
jQuery Mobile Example
  
  

      

          

              
Section 1
              
I'm the collapsible content for section 1
          
          

              
Section 2
              
I'm the collapsible content for section 2
          
          

              
Section 3
              
I'm the collapsible content for section 3
          
      
  

 

效果如图

我们可以用这样实现。

1.先在data-role="collapsible"的div上添加class标记：class="expand"，代码如下（红色为添加部分）

  
  
  
  
  
  


 

  

    
jQuery Mobile Example
  
  

      

          
class="expand">
              
Section 1
              
I'm the collapsible content for section 1
          
          
class="expand">
              
Section 2
              
I'm the collapsible content for section 2
          
          
class="expand">
              
Section 3
              
I'm the collapsible content for section 3
          
      
  

 

2.在collapse执行过程中jquer会在

内部添加，如图

Section 1 click to expand contents

因此我们要控制a.ui-collapsible-heading-toggle的开改变字体颜色，js代码如下

$( ".expand" ).on( "collapsibleexpand", function( event, ui ) {
            $('a.ui-collapsible-heading-toggle').css({"color":"rgb(51,51,51)"});
            $('a.ui-collapsible-heading-toggle',this).css({"color":"red"});
        } );

逻辑是：

当某个class为.expand的div 展开的时候，改变所有a.ui-collapsible-heading-toggle的css为

({"color":"rgb(51,51,51)"})

$('a.ui-collapsible-heading-toggle').css({"color":"rgb(51,51,51)"});

并改变当前(this)的颜色为red

$('a.ui-collapsible-heading-toggle',this).css({"color":"red"});

这个时候，只要你点击任意一个head，字体颜色就会变成红色。

效果如图所示

3.现在。我们要保持当headcollapse的时候，字体保持rgb(51,51,51).可以修改原来js代码为一下代码：

$( ".expand" ).on( "collapsibleexpand", function( event, ui ) {
            $('a.ui-collapsible-heading-toggle').css({"color":"rgb(51,51,51)"});
            $('a.ui-collapsible-heading-toggle',this).css({"color":"red"});
        } ).on( "collapsiblecollapse", function( event, ui ) {
            $('a.ui-collapsible-heading-toggle').css({"color":"rgb(51,51,51)"});
        } );

便可以实现expand的时候字体变成red，collapse的时候字体变为rgb(51,51,51)

效果如图

问题：
由于增加的事件

.on( "collapsiblecollapse", function( event, ui ) {
            $('a.ui-collapsible-heading-toggle').css({"color":"rgb(51,51,51)"});
        } );

会把所有的a.ui-collapsible-heading-toggle的css修改，
有因为每个head在expand的时候，其他之前已经expand的head会collapse，这样会导致一个问题，那就是另外一个head在collapse的时候改变了所有的a.ui-collapsible-heading-toggle的css，这就使得在不同的head间跳转的时候都会触发collapse并改变所有的heading-toggle的字体颜色。
因此我们要让head 在collapse的时候只修改自己的css,也就是把代码修改为

.on( "collapsiblecollapse", function( event, ui ) {
            $('a.ui-collapsible-heading-toggle',this).css({"color":"rgb(51,51,51)"});
        } );

这样就可以保证了其他head的css不被改变。
从而实现在head间跳转的时候，字体都会改变颜色。