2

我正在尝试将可折叠列表与普通列表结合起来，例如：

Link 1 (header)
Link 2 (header)
List header
    Link 3
    Link 4
Link 5 (header)
List header
    Link 6
    Link 7
Link 8 (header)

问题是当我将链接添加到标题时：

<h3>
    <a href="link.php">My link</a>
</h3>

jQuery Mobile 把它变成了这样的东西：

<a href="#">
    <span class="ui-btn-inner>
        <span class="ui-btn-text">
            <a href="link.php" class="ui-link">My link</a>
        </span>
    </span>
</a>

这不允许我想要发生的行为。我基本上想要一个混合列表，在同一顶层包含可折叠项目和链接。如果有人可以帮助我，我将不胜感激。

4

3 回答 3

4

好的，所以我发现了如何做到这一点，这是一个相当不错的解决方案。在可折叠块的 H3 内，只需像往常一样添加链接并给它一个自定义类名：

<div data-role="collapsible" data-allow-collapse="false">
    <h3>
        <a href="link.php" class="collapsible-header-link">My link</a>
    </h3>
</div>

...然后使用 jQuery Mobile 的changePage()函数触发给定 URL 的页面更改：

$("#my_page").live('pageinit', function (event) {
    $(".ui-collapsible-heading-toggle").bind("click", function (e) {
        var $link = $(this).find('.collapsible-header-link');
        if ($link.length > 0)
            $.mobile.changePage($link.attr('href'));
    });
});

您可以根据需要在任意数量的标题上添加此类链接，它将完美运行。希望这将有助于其他遇到此问题的人。干杯!

于 2012-11-15T12:55:51.167 回答
2

代码现在很旧，.live() 已弃用，现在我们必须使用：

$( document ).on( "pageinit", "#my_page", function( event ) {
$(".ui-collapsible-heading-toggle").bind("click", function (e) {
    var $link = $(this).find('.collapsible-header-link');
    if ($link.length > 0)
        $.mobile.changePage($link.attr('href'));
 });
});

对不起我的英语：D 干杯！

于 2013-11-08T15:28:40.307 回答
2

这是当前不推荐使用的解决方案（jQuery Mobile 1.4.5）：

$( document ).on( "pagecreate", function( event ) {
  $(".ui-collapsible-heading-toggle").bind("click", function (e) {
    var $link = $(this).find('.collapsible-header-link');
    if ($link.length > 0)
        $.mobile.changePage($link.attr('href'));
  });
});

Yamil Revilla（使用on('pageinit', ...）和ladu.luchian（使用）的其他两个答案live(...)已被弃用，如上面的答案和/或评论中所述。

于 2014-12-27T14:00:02.937 回答