Twitter bootstrap 崩溃：更改切换按钮的显示

Posted 2023-02-22

【中文标题】Twitter bootstrap 崩溃：更改切换按钮的显示

【英文标题】：Twitter bootstrap collapse: change display of toggle button

【发布时间】：2013-04-19 22:20:51

【问题描述】：

我正在使用 Twitter Bootstrap 创建可折叠的文本部分。当按下+ 按钮时，这些部分会展开。我的html代码如下：

<div class="row-fluid summary">
    <div class="span11">
        <h2>MyHeading</h2>  
    </div>
    <div class="span1">
        <button type="button" class="btn btn-success" data-toggle="collapse" data-target="#intro">+</button>
    </div>
</div>
<div class="row-fluid summary">
    <div id="intro" class="collapse"> 
        Here comes the text...
    </div>
</div>

有没有办法在该部分展开后将按钮更改为显示- 而不是+（并在再次折叠时更改回+）？

其他信息：我希望有一个简单的基于 twitter-bootstrap/css/html 的解决方案来解决我的问题。到目前为止，所有响应都使用 javascript 或 php。因此，我想添加一些关于我的开发环境的更多信息：我想在基于 SilverStripe（版本 3.0.5）的网站中使用这个解决方案，这对 PHP 和 JavaScript 的使用都有一些影响。

【参考方案1】：

试试这个。 http://jsfiddle.net/fVpkm/

HTML:-

<div class="row-fluid summary">
    <div class="span11">
        <h2>MyHeading</h2>  
    </div>
    <div class="span1">
        <button class="btn btn-success" data-toggle="collapse" data-target="#intro">+</button>
    </div>
</div>
<div class="row-fluid summary">
    <div id="intro" class="collapse"> 
        Here comes the text...
    </div>
</div>

JS：-

$('button').click(function() //you can give id or class name here for $('button')
    $(this).text(function(i,old)
        return old=='+' ?  '-' : '+';
    );
);

更新纯Css，伪元素

http://jsfiddle.net/r4Bdz/

Supported Browsers

button.btn.collapsed:before

    content:'+' ;
    display:block;
    width:15px;

button.btn:before

    content:'-' ;
    display:block;
    width:15px;

更新 2 使用纯 Javascript

http://jsfiddle.net/WteTy/

function handleClick()

    this.value = (this.value == '+' ? '-' : '+');

document.getElementById('collapsible').onclick=handleClick;

【讨论】：

这看起来像我正在寻找的解决方案，也非常感谢 jsfiddle。我还没有设法让它在我的 SilverStripe 网站上运行（请参阅我添加到原始帖子中的其他信息）。

嗨，我已经用纯 css 解决方案更新了我的答案。也许这对你有用。

使用 jQuery 解决方案和基于 CSS 的解决方案都没有成功，但纯 Javascript 终于成功了。我猜 jQuery 和 CSS 遇到了由我使用的 SilverStripe-Twitter-Bootstrap-theme 创建的副作用。非常感谢您的努力，非常感谢！除了现在为我的问题找到解决方案之外，我还从您的建议中学到了很多东西。

弄清楚如何使用基于 jQuery 的解决方案，只需要找到合适的位置来包含脚本。更优雅，因为它可以立即应用于多个部分。

一个注释 - 如果您反复快速单击按钮，这将不同步。那是因为崩溃没有执行完毕。可以通过在合拢完成之前禁用额外的点击来防止这种情况发生。

【参考方案2】：

这是另一个适用于任何 HTML 布局的纯 CSS 解决方案。

它适用于您需要切换的任何元素。无论您的切换布局是什么，您只需将其放在切换元素中的 if-collapsed 和 if-not-collapsed 类的几个元素中即可。

唯一需要注意的是，您必须确保设置了所需的切换初始状态。如果它最初是关闭的，则在切换开关上放置一个collapsed 类。

它还需要:not 选择器，因此它不适用于 IE8。

HTML 示例：

<a class="btn btn-primary collapsed" data-toggle="collapse" href="#collapseExample">
  <!--You can put any valid html inside these!-->
  <span class="if-collapsed">Open</span>
  <span class="if-not-collapsed">Close</span>
</a>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

低版本：

[data-toggle="collapse"] 
    &.collapsed .if-not-collapsed 
         display: none;
    
    &:not(.collapsed) .if-collapsed 
         display: none;
    

CSS 版本：

[data-toggle="collapse"].collapsed .if-not-collapsed 
  display: none;

[data-toggle="collapse"]:not(.collapsed) .if-collapsed 
  display: none;

JS Fiddle

【讨论】：

这是一个很好的答案。希望我能多次投票

谢谢，我确实做了很多研究才想出这个。能够仅使用 css 并使用您想要的任何 html 布局是一大优势。对于需要使用尽可能少的 javascript 获得最佳性能的移动设备而言，这一点非常重要。

我喜欢这个答案，但似乎 Bootstrap (2.3.1) 有一个错误，即在单击锚元素时添加了 .collapse。这意味着如果实际目标已显示，则该类可能会变得不同步。

@Harvey 我只用 bootstrap 3 测试过，自从我使用 bootstrap 2 已经很久了。

这是一个非常优雅的解决方案。请注意，为了使其工作：如果某个部分被折叠，请确保切换元素具有类 collapsed。如果某个部分由于具有类 collapse in 而被扩展，请确保切换元素不具有类 collapsed。示例：jsfiddle.net/ahx7r627.

【参考方案3】：

添加一些jquery代码，你需要jquery来做到这一点：

<script>
        $(".btn[data-toggle='collapse']").click(function() 
            if ($(this).text() == '+') 
                $(this).text('-');
             else 
                $(this).text('+');
            
        );
        </script>

【讨论】：

马卡西下巴巴尼亚。这看起来是正确的解决方案。不过，我还没有设法让它在我的 SilverStripe 实例中运行。

希望我能多点赞。到目前为止，将此函数添加到现有代码中的最简单、最简洁的方法 - 谢谢！

【参考方案4】：

此处发布的所有其他解决方案都会导致切换在双击时不同步。以下解决方案使用events provided by the Bootstrap framework，并且切换始终与可折叠元素的状态匹配：

HTML：

<div class="row-fluid summary">
    <div class="span11">
        <h2>MyHeading</h2>  
    </div>
    <div class="span1">
        <button id="intro-switch" class="btn btn-success" data-toggle="collapse" data-target="#intro">+</button>
    </div>
</div>
<div class="row-fluid summary">
    <div id="intro" class="collapse"> 
        Here comes the text...
    </div>
</div>

JS：

$('#intro').on('show', function() 
  $('#intro-switch').html('-')
)
$('#intro').on('hide', function() 
  $('#intro-switch').html('+')
)

这应该适用于大多数情况。

但是，在尝试将一个可折叠元素及其切换开关嵌套在另一个可折叠元素中时，我还遇到了另一个问题。使用上面的代码，当我单击嵌套切换以隐藏嵌套的可折叠元素时，父元素的切换也会发生变化。这可能是 Bootstrap 中的错误。我找到了一个似乎可行的解决方案：我在切换开关中添加了一个“折叠”类（当可折叠元素被隐藏但它们没有从它开始时，Bootstrap 添加了这个），然后将它添加到 jQuery 选择器中隐藏功能：

http://jsfiddle.net/fVpkm/87/

HTML：

<div class="row-fluid summary">
    <div class="span11">
        <h2>MyHeading</h2>  
    </div>
    <div class="span1">
        <button id="intro-switch" class="btn btn-success collapsed" data-toggle="collapse" data-target="#intro">+</button>
    </div>
</div>
<div class="row-fluid summary">
    <div id="intro" class="collapse"> 
        Here comes the text...<br>
        <a id="details-switch" class="collapsed" data-toggle="collapse" href="#details">Show details</a>
        <div id="details" class="collapse">
            More details...
        </div>
    </div>
</div>

JS：

$('#intro').on('show', function() 
    $('#intro-switch').html('-')
)
$('#intro').on('hide', function() 
    $('#intro-switch.collapsed').html('+')
)

$('#details').on('show', function() 
    $('#details-switch').html('Hide details')
)
$('#details').on('hide', function() 
    $('#details-switch.collapsed').html('Show details')
)

【讨论】：

可能是嵌套问题是事件冒泡/传播的问题吗？应该能够阻止它

仅供任何尝试此操作的人参考，在最新版本的 boostrap 中，事件名称为“show.bs.collapse”和“hide.bs.collapse”。

【参考方案5】：

我喜欢 CSS-only solution from PSL，但在我的例子中，我需要在按钮中包含一些 HTML，并且 content CSS 属性在这种情况下显示带有标签的原始 HTML。

如果可以帮助其他人，我已经分叉了他的小提琴来覆盖我的用例：http://jsfiddle.net/brunoalla/99j11h40/2/

HTML：

<div class="row-fluid summary">
    <div class="span11">
        <h2>MyHeading</h2>  
    </div>
    <div class="span1">
        <button class="btn btn-success collapsed" data-toggle="collapse" data-target="#intro">
            <span class="show-ctrl">
                <i class="fa fa-chevron-down"></i> Expand
            </span>
            <span class="hide-ctrl">
                <i class="fa fa-chevron-up"></i> Collapse
            </span>            
        </button>
    </div>
</div>
<div class="row-fluid summary">
    <div id="intro" class="collapse"> 
        Here comes the text...
    </div>
</div>

CSS：

button.btn .show-ctrl
    display: none;

button.btn .hide-ctrl
    display: block;

button.btn.collapsed .show-ctrl
    display: block;

button.btn.collapsed .hide-ctrl
    display: none;

【参考方案6】：

我的以下 JS 解决方案比这里的其他方法更好，因为它确保在目标关闭时它总是说“打开”，反之亦然。

HTML：

<a href="#collapseExample" class="btn btn-primary" data-toggle="collapse" data-toggle-secondary="Close">
    Open
</a>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

JS：

$('[data-toggle-secondary]').each(function() 
    var $toggle = $(this);
    var originalText = $toggle.text();
    var secondaryText = $toggle.data('toggle-secondary');
    var $target = $($toggle.attr('href'));

    $target.on('show.bs.collapse hide.bs.collapse', function() 
        if ($toggle.text() == originalText) 
            $toggle.text(secondaryText);
         else 
            $toggle.text(originalText);
        
    );
);

示例：

$('[data-toggle-secondary]').each(function() 
    var $toggle = $(this);
    var originalText = $toggle.text();
    var secondaryText = $toggle.data('toggle-secondary');
    var $target = $($toggle.attr('href'));

    $target.on('show.bs.collapse hide.bs.collapse', function() 
        if ($toggle.text() == originalText) 
            $toggle.text(secondaryText);
         else 
            $toggle.text(originalText);
        
    );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

<a href="#collapseExample" class="btn btn-primary" data-toggle="collapse" data-toggle-secondary="Close">
    Open
</a>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

JS Fiddle

这种方法的其他好处：

代码是 DRY 且可重复使用的 每个折叠按钮保持独立 您只需要在 HTML 中进行一项更改：添加 data-toggle-secondary 属性

【参考方案7】：

我想你可以在下载的代码中查看+ 符号的确切位置（但这可能不是很容易）。

我会怎么做？ 我会找到包含 + 符号的 DOM 元素的类/ID（假设它是 ".collapsible"，并且使用 Javascript（实际上是 jQuery）：

<script>
     $(document).ready(function() 
         var content=$(".collapsible").html().replace("+", "-");
         $(".collapsible").html(content));
     );
</script>

编辑 好吧...对不起，我还没有查看引导代码...但我猜它适用于slideToggle或slideDown and slideUp之类的东西...想象一下它是slideToggle，用于类.collapsible的元素，它揭示了一些.info 元素的内容。然后：

         $(".collapsible").click(function()  
             var content=$(".collapsible").html();
             if $(this).next().css("display") === "none")  
                 $(".collapsible").html(content.replace("+", "-"));
             
             else $(".collapsible").html(content.replace("-", "+"));
         );

这似乎是相反的事情，但是由于实际的动画是并行运行的，所以你会在动画之前检查 css，这就是为什么你需要检查它是否可见（这意味着一旦动画被隐藏它就会被隐藏完成），然后设置相应的+或-。

【讨论】：

感谢您的回复。 + 是我的 button 定义的一部分（看看我上面的代码）。如果我正确理解了您的代码，那么它将在页面完全加载后将所有+ 实例替换为-。我需要的是在单击+ 按钮后将+ 替换为-。

嘿，再看看我的回答。我已经对其进行了编辑，以便您可以更清楚地阅读它

感谢您的努力。我已经接受了第一个答案，它提出了一个类似的基于 jQuery 的解决方案。

【参考方案8】：

内联编码更容易

<button type="button" ng-click="showmore = (showmore !=null && showmore) ? false : true;" class="btn float-right" data-toggle="collapse" data-target="#moreoptions">
            <span class="glyphicon" ng-class="showmore ? 'glyphicon-collapse-up': 'glyphicon-collapse-down'"></span>
             showmore !=null && showmore ? "Hide More Options" : "Show More Options" 
        </button>


<div id="moreoptions" class="collapse">Your Panel</div>

【参考方案9】：

有些人可能会在更改 Bootstrap js 时遇到问题（也许确实如此），但这是实现此目的的两行方法。

在 bootstrap.js 中，查找 Collapse.prototype.show 函数并修改 this.$trigger 调用以添加 html 更改，如下所示：

this.$trigger
  .removeClass('collapsed')
  .attr('aria-expanded', true)
  .html('Collapse')

同样在 Collapse.prototype.hide 函数中将其更改为

this.$trigger
  .addClass('collapsed')
  .attr('aria-expanded', false)
  .html('Expand')

这将在所有内容展开时的“折叠”和所有内容折叠时的“展开”之间切换文本。

两行。完成。

编辑：从长远来看，这是行不通的。 bootstrap.js 是 Nuget 包的一部分，所以我认为它不会将我的更改传播到服务器。如前所述，编辑 bootstrap.js 并不是最佳实践，所以我实现了 PSL 的解决方案，效果很好。尽管如此，如果您需要快速尝试一下，我的解决方案将在本地工作。

【参考方案10】：

你喜欢这样。 该函数返回旧文本。

$('button').click(function() 
        $(this).text(function(i,old)
            return old=='Read More' ?  'Read Less' : 'Read More';
        );
    );

【参考方案11】：

在 Bootstrap 5.0.1 中应用和工作。 使用简单的 jQuery

jQuery('button').on( 'click', function()
    if(jQuery(this).hasClass('collapsed'))
        jQuery(this).html('+');
     else 
        jQuery(this).html('-');
    
);

您也可以使用 font awesome 或 HTML 来代替 +/- 符号。