0

これを機能させるために非常に多くの異なるスクリプトを試しましたが、タオルを投げて質問する必要がありました。私の JQuery セットアップは、head セクションで参照される外部 JS ファイルであり、そのファイルに JQuery コードを追加します。独自のクラスとスクリプトを持つ Twitter Bootstrap テーマもあります。この投稿http://skipology.com/iphoneography-applications-most-used/で、コード/クラスに組み込まれた Twitter Bootstrap を使用して、いくつかの拡張可能な div を作成しました。展開と終了をトリガーするアンカーの html は次のとおりです。

<ul class="nav nav-tabs"><li class="active expandable"><a role="button" tabindex="0" 
data-toggle="collapse" data-target="#snapseed"><i class="icon-sort icon-large"></i> 
More...</a></li><ul>

私がやろうとしているのは、div が展開されたときに「More...」テキストを「Less...」に変更することです。スパンの追加や、クリックまたはオンクリックによってトリガーされる toggle() の使用など、さまざまなスクリプトを試しましたが、何も機能しないようです。Twitter Bootstrap には、click や onclick ではなく、show: shown: hide: や hidden: などのさまざまなイベントを使用できます。

JQuery、Wordpress、および Bootstrap の組み合わせは、私を完全に混乱させていると思います。静的サイトでこれを行うことができることを知っています。誰でもスクリプトを思いつくことができますか?

4

2 に答える 2

0

これは私のために働いた

    $('[data-toggle="collapse"]').click(function() {
       $(this).text($(this).text() == 'More' ? 'Less' : 'More');
 });

Googleは私をこの情報源に連れて行った

注：私はjQuery + Bootstrapを使用していますが、Wordpressを使用していないため、異なる場合があります

于 2013-03-06T16:35:20.107 に答える
0

これを試して：

$('li.expandable a[data-toggle="collapse"]').on('click',function(){
    if ($($(this).data('target')).hasClass('in')){
        $(this).val(($(this).val()).replace(/More/,'Less'));
    }
    else{
        $(this).val(($(this).val()).replace(/Less/,'More'));
    }
})
于 2013-02-19T21:26:47.850 に答える