Question

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

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>

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

Answer 1

好的，所以我发现了如何做到这一点，这是一个非常好的解决方案。在可折叠块的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'));
    });
});

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

Answer 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 干杯！

Answer 3

这是当前未初步的解决方案（ 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(...)）的其他两个答案已弃用，如下所述上面的答案和/或评论。

在jQuery Mobile中添加指向可折叠列表头部的链接

3 个答案: