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

これは現在非推奨のソリューションです ( 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 ( を使用)からの他の 2 つの回答live(...)は、上記の回答および/またはコメントに記載されているように非推奨です。

于 2014-12-27T14:00:02.937 に答える
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 に答える