使用jquery mobile Collapsible Widget 時繫結expand,collapse事件監聽器的方法
阿新 • • 發佈：2019-02-02
根據官方文件，expand事件監聽由expand(event,ui)來實現
expand( event, ui )Type: collapsibleexpand
Triggered when a collapsible is expanded
繫結event listener(事件監聽器)到collapsibleexpand event的程式碼如下。
| 1 |
$( ".selector" ).on( "collapsibleexpand", function( event, ui ) {} );
|
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" 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)"});
} );
效果如圖
問題：
由於增加的事件
.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間跳轉的時候，字型都會改變顏色。