0

data-collapsed-icon = "arrow-r" data-expanded-icon = "arrow-l"を使用して、折りたたみ可能なセットのデータアイコンを矢印に設定しました。これは機能しますが、不合理です。

手始めに、iphoneで右矢印を表示する代わりに折りたたんで表示すると、右にシフトしているためほとんど見えない左矢印が表示されます。iPhoneで展開すると、上向きの矢印が適切に配置されます。???

Chromeでは問題なく表示されます。https://www.ubat.com/mobile/test.html

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>

<script src="jquery.mobile-1.2.0.min.js" type="text/javascript"></script>

<script type="text/javascript" src="//use.typekit.net/kxv5fxv.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<div data-role="page">
  <div data-role="header">
    <h1>My Title</h1>
  </div>
  <!-- /header -->

  <div data-role="content">
    <p>Hello world</p>

    <div data-role="collapsible-set" data-iconpos="right" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-l">
      <div data-role="collapsible" data-collapsed="true" >
        <h3>Section 1</h3>
        <p>I'm the collapsible set content for section 1.</p>
      </div>
      <div data-role="collapsible" data-collapsed="true">
        <h3>Section 2</h3>
        <p>I'm the collapsible set content for section 2.</p>
      </div>
    </div>


  </div>
  <!-- /content --> 

</div>
<!-- /page -->

</body>
</html>
4

1 に答える 1

2

古いバージョンと新しいバージョンのjQueryMobileのファイルを混在させないでください。

バージョン1.2.0を使用して、この実用的な例を試してください。

<!DOCTYPE html>
<html>
<head>
<title>My page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet"
    href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script
    src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>

<body>
<div data-role="page">
  <div data-role="header">
    <h1>My Title</h1>
  </div>
  <!-- /header -->

  <div data-role="content">
    <p>Hello world</p>

    <div data-role="collapsible-set" data-iconpos="right" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-l">
      <div data-role="collapsible" data-collapsed="true" >
        <h3>Section 1</h3>
        <p>I'm the collapsible set content for section 1.</p>
      </div>
      <div data-role="collapsible" data-collapsed="true">
        <h3>Section 2</h3>
        <p>I'm the collapsible set content for section 2.</p>
      </div>
    </div>


  </div>
  <!-- /content --> 

</div>
<!-- /page -->

</body>
</html>

iPhone 5の場合：

1

Firefoxの場合：

2

データアイコンの配置に問題はないはずです。

于 2012-10-11T06:56:51.613 に答える