Question

尝试了许多不同的脚本试图让这个工作不得不放弃并问。我的JQuery设置是一个外部JS文件，在head部分引用，我将JQuery Code添加到该文件中。还有一个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时将“更多...”文本更改为“更少...”。我尝试了各种脚本，包括添加跨度和使用click或onclick触发的toggle（），但似乎没有任何效果。 Twitter Bootstrap有我可以使用的各种事件而不是点击或onclick我认为如show：shown：hide：and hidden：

我认为JQuery，Wordpress和Bootstrap的结合让我感到困惑。我知道我可以在静态网站上这样做。任何人都可以提出一个剧本吗？

Answer 1

试试这个：

$('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'));
    }
})

Answer 2

这对我有用

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

谷歌把我带到了source

注意：我使用的是jQuery + Bootstrap，但不是Wordpress，所以可能会有所不同

单击锚点更改文本（Twitter Bootstrap主题）

2 个答案: