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

最新推荐文章于 2023-01-21 11:57:16 发布

Gextreme

最新推荐文章于 2023-01-21 11:57:16 发布

阅读量3.8k

点赞数

分类专栏：前端开发文章标签： jquery mobile Collapsible Widget expand collapse 事件监听器

本文链接：https://blog.youkuaiyun.com/Gextreme/article/details/23343055

版权

前端开发专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何使用jQuery Mobile的Collapsible Widget绑定expand和collapse事件监听器。通过添加class标记并利用JavaScript代码，实现了在展开时改变字体颜色，并在折叠时保持特定颜色的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据官方文档，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代码如下

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>collapsible demo</title>
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
 
<div data-role="page" id="page1">
  <div data-role="header">
    <h1>jQuery Mobile Example</h1>
  </div>
  <div role="main" class="ui-content">
      <div data-role="collapsibleset" data-theme="a" data-content-theme="a">
          <div data-role="collapsible">
              <h3>Section 1</h3>
              <p>I'm the collapsible content for section 1</p>
          </div>
          <div data-role="collapsible">
              <h3>Section 2</h3>
              <p>I'm the collapsible content for section 2</p>
          </div>
          <div data-role="collapsible">
              <h3>Section 3</h3>
              <p>I'm the collapsible content for section 3</p>
          </div>
      </div>
  </div>
</div>
 
</body>
</html>

效果如图

我们可以用这样实现。

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>collapsible demo</title>
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
 
<div data-role="page" id="page1">
  <div data-role="header">
    <h1>jQuery Mobile Example</h1>
  </div>
  <div role="main" class="ui-content">
      <div data-role="collapsibleset" data-theme="a" data-content-theme="a">
          <div data-role="collapsible" class="expand">
              <h3>Section 1</h3>
              <p>I'm the collapsible content for section 1</p>
          </div>
          <div data-role="collapsible" class="expand">
              <h3>Section 2</h3>
              <p>I'm the collapsible content for section 2</p>
          </div>
          <div data-role="collapsible" class="expand">
              <h3>Section 3</h3>
              <p>I'm the collapsible content for section 3</p>
          </div>
      </div>
  </div>
</div>
 
</body>
</html>

2.在collapse执行过程中jquer会在<h3>内部添加<a>，如图

<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed"><a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-btn-a ui-icon-plus" style="color: red;">Section 1<span class="ui-collapsible-heading-status"> click to expand contents</span></a></h3>

因此我们要控制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间跳转的时候，字体都会改变颜色。