jquery移动可折叠集中的数据图标位置偏离了视图？

时间：2012-10-11 00:30:34

标签： jquery jquery-mobile

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

1 个答案:

答案 0 :(得分：2)

您不应混合旧版和新版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上：

1

在Firefox上：

2

不应存在任何数据图标放置问题。

相关问题
最新问题