Question

这没有道理，是的。我正在尝试使用一个简单的可折叠集，只是取消它的样式并更改链接上的颜色等。首先任务 - 更改图标并将其向右移动而不是向左移动。我尝试使用data-iconpos="right"的方式与我使用data-collapsed="true"的方式相同，但它似乎不起作用。没有任何规定的jQuery数据 - 这样的函数似乎工作，如主题更改，而不是a，b或c。我在这里错过了什么？根据文档，这应该是非常容易的！

实时观看：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 src="css/jquery-1.5.min.js" type="text/javascript"></script>

<script src="css/jquery.mobile-1.0a3.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">
      <div data-role="collapsible" data-collapsed="true" data-iconpos="right">
        <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

你正在使用一个非常过时的（alpha！）版本的jQuery Mobile。最新版本为1.2.0，自定义图标位置的可折叠集在版本1.1.0之前未出现

请升级jQuery和jQuery Mobile版本，以使代码正常工作。

Answer 2

我经常遇到的与jQuery Mobile有关的事情是，在运行时将更多的类和元素添加到DOM中，因此您的CSS样式需要考虑新的结构。我并不是建议使用他们的数据属性来解决问题的“jQuery方式”，但是当你遇到没有内置选项的想要改变的事情时，这将有助于你。

以下是两个可折叠部分中的一个。为了便于阅读，我试图将其置于空间（它仍然很混乱）。

<div data-role="collapsible-set" class="ui-collapsible-set">
  <div data-role="collapsible" data-collapsed="true" data-iconpos="right" class="ui-collapsible-contain">

  <h3 class="ui-collapsible-heading">
    <a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-corner-top ui-btn-down-c ui-btn-up-c" data-theme="c">

      <span class="ui-btn-inner ui-corner-top">
        <span class="ui-btn-text">Section 1
          <span class="ui-collapsible-heading-status"> click to collapse contents</span>
        </span>

        <span data-theme="d" class="ui-btn ui-btn-up-d ui-btn-icon-left ui-btn-corner-all ui-shadow">
          <span class="ui-btn-inner ui-btn-corner-all ui-corner-top">
            <span class="ui-btn-text"></span><span class="ui-icon ui-icon-shadow ui-icon-minus"></span>
          </span>
        </span>
      </span>
    </a>
  </h3>
  <div class="ui-collapsible-content" aria-hidden="false">
    <p>I'm the collapsible set content for section 1.</p>
  </div>
</div>
</div>

您可以将按钮图标向右移动的方法是在CSS中执行此操作：

  .ui-collapsible-heading a span.ui-btn{
    left: inherit;
    right: 6px; /* Previously left was 6px */
  }

我发现解决这些问题的最佳方法是在浏览器中打开检查器并查看jQuery Mobile创建的最终结构。

jquery mobile - style icon-position not working collapsible set

2 个答案: