0

这毫无意义，真的。我正在尝试使用一个简单的可折叠集，然后取消样式并更改链接等的颜色。第一个任务-更改图标并将其移动到右侧而不是左侧。我正在尝试以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>
4

2 回答 2

1

您使用的是非常过时的（alpha！）版本的 jQuery Mobile。最新的是1.2.0和自定义图标位置的可折叠集直到版本1.1.0才出现

请同时升级 jQuery 和 jQuery Mobile 版本以使您的代码正常工作。

于 2012-10-10T18:05:47.197 回答
0

我在使用 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 创建的最终结构。

于 2012-10-10T18:22:48.620 回答