jquery mobile可折叠集中的数据图标位置移出视图？

Question

我通过 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>

Answer 1

您不应该混合使用新旧版本 jQuery Mobile 的文件。

使用 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 上：

在 Firefox 上：

不应该有任何数据图标放置问题。