更改 jQuery Mobile 可折叠集上的图标答案

【问题标题】：Change Icon on jQuery Mobile Collapsible Sets更改 jQuery Mobile 可折叠集上的图标
【发布时间】：2014-02-03 16:49:55
【问题描述】：

我是第一次使用 jQuery Mobile，但在完成对 collapsible set (accordion) 上的图标进行看似简单的更改时遇到了麻烦。

我想将可折叠集上每个标题的图标更改为展开状态的向上箭头和折叠状态的向下箭头。

我创建的a Fiddle 似乎与我直接从 jQuery 移动网站复制并稍作修改的代码存在相同的问题。

对此的任何帮助或指示将不胜感激。谢谢！

【问题讨论】：

标签： jquery-mobile

【解决方案1】：

您引用的文档页面实际上使用了最新的 Work in Progress 版本的 jquery mobile。所以这是我们在 JQM 的未来版本中可以期待的功能。在当前的稳定版本中，我们将无法通过以下方式更改图标指定数据属性的方法。

这是一个例子：它使用了 jqm 的 Work in Progress 版本 - http://jsfiddle.net/AAYjF/

但建议使用稳定版。因此您可以使用以下代码来实现：

<!DOCTYPE html>
<html>
    <head>
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    <style>
        .ui-collapsible .ui-icon{
            background-position: -180px 50%;/*Position of up icon in icon sprite*/
        }

        .ui-collapsible-collapsed .ui-icon{
            background-position: -216px 50%;/*Position of down icon in icon sprite*/
        }

    </style>
</head>
<body>

<div data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <div data-role="collapsible-set">

    <div data-role="collapsible">
    <h3>Section 1</h3>
    <p>I'm the collapsible set content for section B.</p>
    </div>

    <div data-role="collapsible" >
    <h3>Section 2</h3>
    <p>I'm the collapsible set content for section B.</p>
    </div>

</div>
    </div><!-- /content -->

</div><!-- /page -->

</body>
</html>

逻辑是将图标精灵中上下图标的背景位置用于折叠和展开的图标

演示：http://jsfiddle.net/6x8ew/

【讨论】：

啊啊啊啊！未来版本。那讲得通。我没有在文档中读到它们（文档本身）是针对不稳定版本的。如果让图标箭头而不是加号/减号对我来说非常重要，那么 CSS 调整也是我应该做的。大多数情况下，我只是好奇为什么我认为标准的方法不起作用。谢谢！
很高兴能提供帮助。这是稳定版文档的链接。jquerymobile.com/demos/1.1.0。

【解决方案2】：

我相信您可以改进此解决方案，但这里有一个基本想法，即在不侵入 JQM 源的情况下实现此目的的一种方法。

$(document).on('pageinit',function(){

    $('.ui-collapsible .ui-icon').removeClass('ui-icon-plus').addClass('ui-icon-arrow-u');

    $('[data-role=collapsible]')
        .on('expand',function(){ 
            $(this).find('.ui-icon').removeClass('ui-icon-arrow-u').addClass('ui-icon-arrow-d');               
        })
        .on('collapse',function(){
            $(this).find('.ui-icon').removeClass('ui-icon-arrow-d').addClass('ui-icon-arrow-u');
        });        
});

我正在使用jqm的可折叠事件来切换到合适的图标。

见我的working example。

【讨论】：

1) 不要忘记链接：$('.ui-collapsible').on('expand', ...).on('collapse', ...).find('.ui-icon')...。 2) 所以你不要选择 DOM 中的所有小部件，事件隐藏页面上的小部件，为你的选择器添加前缀 $(event.target)，如下所示：$(event.target).find('.ui-collapsible')...（这需要传入 @987654326 @ 变量）。 3) 如果您绑定到pageinit 事件，那么小部件将已经拥有它们的.ui-*** 类。很好的答案。
这个答案对我有帮助 - 我只是将选择器更改为包含 h3（即$('.ui-collapsible > h3 .ui-icon',this)），因为我不希望折叠内容中的图标发生变化。

【解决方案3】：

我还没有用 jQuery Mobile 做太多事情，所以请尽情享受它的价值。

我认为您需要将属性放在<div data-role="collapsible-set"> 上，而不是每个data-role="collapsible" 上。显然，这只适用于所有孩子，它不会让您针对个别孩子。

【讨论】：

感谢您的建议。它在docs 中说我应该能够将它放置在可折叠集级别或“单个可折叠基础”上，但这些都不适合我......
错误的文档。注意 url 中的 test 一词。它是一个尚未实现的功能。查看当前文档或您使用的版本的文档。

【解决方案4】：

使用 jquery 移动版 1.4.0，您可以通过在 CSS 文件中包含以下代码来完成此操作

用于自定义右箭头

.ui-icon-arrow-r:after {
  background: url("Path to your image file") no-repeat scroll 0px 0px transparent;

}

用于自定义向下箭头

.ui-icon-arrow-d:after {
  background: url("Path to your image file") no-repeat scroll 0px 0px transparent;

}

【讨论】：