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

Question

我正在使用 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 的使用都有一些影响。

score 97 · Accepted Answer

尝试这个。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/

支持的浏览器

button.btn.collapsed:before
{
    content:'+' ;
    display:block;
    width:15px;
}
button.btn:before
{
    content:'-' ;
    display:block;
    width:15px;
}

使用纯 Javascript更新 2

http://jsfiddle.net/WteTy/

function handleClick()
{
    this.value = (this.value == '+' ? '-' : '+');
}
document.getElementById('collapsible').onclick=handleClick;

score 82 · Accepted Answer

这是另一个适用于任何 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小提琴

score 6 · Accepted Answer

添加一些 jquery 代码，您需要 jquery 来执行此操作：

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

score 5 · Accepted Answer

如果双击，此处发布的所有其他解决方案都会导致切换不同步。以下解决方案使用Bootstrap 框架提供的事件，并且切换始终与可折叠元素的状态匹配：

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')
})

score 3 · Accepted Answer

我喜欢PSL 的纯 CSS 解决方案，但在我的情况下，我需要在按钮中包含一些 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;
}

score 3 · Accepted Answer

我的以下 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小提琴

这种方法的其他好处：

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

score 1 · Accepted Answer

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

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

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

编辑好吧...对不起，我还没有查看引导代码...但我猜它适用于类似的东西slideToggle，或者slideDown and slideUp...想象一下它是slideToggle用于 class 的元素.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，这就是为什么您需要检查它是否可见（这意味着一旦动画完成它将被隐藏）和然后设置相应的+或-。

score 0 · Accepted Answer

有些人可能会对更改 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 的解决方案，效果很好。尽管如此，如果您需要快速尝试一下，我的解决方案将在本地工作。

score 0 · Accepted Answer

在 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 来代替 +/- 符号。

score 0 · Accepted Answer

你就是这样。该函数返回旧文本。

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

score 0 · Accepted Answer

内联编码更容易

<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>

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

11 回答 11

HTML：

CSS：

例子：

这种方法的其他好处：

Related

Reference