單擊按鈕時更改按鈕文本帶引導程序

使用最新版本的Bootstrap和內置的手風琴功能，是否有將按鈕文本更改爲不同的方法？單擊按鈕時更改按鈕文本帶引導程序

例如：我有一個按鈕，顯示文本'查找咖啡廳'，點擊手風琴打開並顯示一個列表。但是，我希望文字更改爲顯示關閉。

我想我應該使用click和html函數，但不知道如何安排它們。

HTML：

<div id="accordion" class="accordion"> 
    <div class="accordion-group"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Find Cafe 
      </a> 
      <div id="collapseOne" class="accordion-body collapse in"> 
       <div class="accordion-inner"> 
        Anim pariatur cliche... 
       </div> 
      </div> 
    </div> 
</div>

JS：

$('.collaspe').collapse();

來源

2013-04-23 jfrosty

您woudn't使用引導這一點。你會簡單地使用jQuery：

$('a.accordion-toggle').click(function() { 
    if ($(this).next('.accordion-body').hasClass('in')) { 
     $(this).text('Close'); 
    } else { 
     $(this).text('Find Cafe'); 
    } 
});

來源

2013-04-23 17:46:10 isherwood

似乎並沒有改變文本關閉。 – jfrosty 2013-04-23 18:00:37

沒有演示，我無法開始排除故障。這是非常基本的jQuery，應該工作。 – isherwood 2013-04-23 18:15:35

對不起，我拼錯了其中一個定位類。它的作品很棒。謝謝。接受答案！ – jfrosty 2013-04-23 18:16:44

如果你需要在模板配置單獨的文本，分離功能的演示。

$('body').on('click', '[data-toggle="collapse"]', function() { 
    console.log(this); 
    var _self = $(this); 
    var _content = $(_self.attr('data-target')); 
    var _originalText = _self.attr('data-text'); 

    if (_content.hasClass('in')) { 
     _self.text(_self.attr('data-textexp')); 
    } else { 
     _self.text(_self.attr('data-text')); 
    } 
});

來源

2014-04-17 13:58:02

你可以做到這一點不用JS也

.toggle-accordion:before { 

    content:'see more' 

} 

.toggle-accordion[aria-expanded="true"]:before { 

    content:'close'; 

}

來源

2015-04-04 10:42:25 Kieran

爲此，您可以使用jQuery

$('#your-button-id').click(function(){ 
    $(this).text(function(i,old){ 
     return old=='Find Cafe' ? 'Close' : 'Find Cafe'; 
    }); 
});

清潔&簡單:)

來源

2016-02-16 08:28:56

單擊按鈕時更改按鈕文本帶引導程序

回答

相關問題