jquery mobile可摺疊設置中的數據圖標位置移出視圖？

我通過data-collapsed-icon =「arrow-r」data-expanded-icon =「arrow-l」將可摺疊集的數據圖標設置爲箭頭，但這種工作非常不合理。jquery mobile可摺疊設置中的數據圖標位置移出視圖？

對於初學者來說，當在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>

來源

2012-10-11 harp

您不應該混合舊版和新版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：

不應該有任何數據圖標放置問題。

來源

2012-10-11 06:56:51 Littm

謝謝！我甚至沒有注意到這一點。修正它吧。還有一個問題 - 你知道如何影響關閉和開放集合的文本顏色嗎？ – harp

歡迎您：P。對於封閉和開放集合的顏色，您應該將其作爲新的答案;） – Littm

jquery mobile可摺疊設置中的數據圖標位置移出視圖？

回答

相關問題