Fatal编程技术网
  • javascript/
  • Javascript Twitter引导折叠：更改切换按钮的显示

Javascript Twitter引导折叠：更改切换按钮的显示

javascript html css twitter-bootstrap silverstripe

Javascript Twitter引导折叠：更改切换按钮的显示,javascript,html,css,twitter-bootstrap,silverstripe,Javascript,Html,Css,Twitter Bootstrap,Silverstripe,我正在使用Twitter引导创建可折叠的文本部分。按下+按钮时，这些部分将展开。我的html代码如下所示： <div class="row-fluid summary"> <div class="span11"> <h2>MyHeading</h2> </div> <div class="span1"> <button type="button" class=

我正在使用Twitter引导创建可折叠的文本部分。按下
+
按钮时，这些部分将展开。我的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>

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


我的标题
+
下面是文本。。。
是否有办法在节展开后将按钮更改为显示
-
而不是
+
（并在再次折叠时更改回
+

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

试试这个

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>

$('button').click(function(){ //you can give id or class name here for $('button')
    $(this).text(function(i,old){
        return old=='+' ?  '-' : '+';
    });
});
使用纯Css、伪元素更新

使用纯Javascript更新2

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

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


$（“.btn[data toggle='collapse']”。单击（函数（）{
如果（$（this）.text（）=='+'））{
$（此）.text（'-'）；
}否则{
$（this.text（+）；
}
});
我想你可以看看你下载的代码里面到底有一个
+
符号（但这可能不是很容易）

我会怎么做？ 我会找到包含
+
符号的DOM元素的class/id（假设它是
“.collapsable”
），并使用Javascript（实际上是jQuery）：

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

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

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>

$('#intro').on('show', function() {
  $('#intro-switch').html('-')
})
$('#intro').on('hide', function() {
  $('#intro-switch').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>

$('#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')
})
这应该适用于大多数情况

但是，在尝试将一个可折叠元素及其切换开关嵌套到另一个可折叠元素中时，我还遇到了另一个问题。使用上面的代码，当我单击嵌套切换隐藏嵌套的可折叠元素时，父元素的切换也会更改。这可能是引导中的错误。我找到了一个解决方案，请参阅ms to work：我向切换开关添加了一个“collapsed”类（当可折叠元素被隐藏时，Bootstrap会添加这个类，但它们不是从它开始的），然后将它添加到隐藏函数的jQuery选择器中：

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>

$('#intro').on('show', function() {
  $('#intro-switch').html('-')
})
$('#intro').on('hide', function() {
  $('#intro-switch').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>

$('#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')
})
我喜欢，但在我的例子中，我需要在按钮中包含一些HTML，在本例中，content CSS属性显示带有标记的原始HTML

如果这能帮助其他人，我已经用他的小提琴来覆盖我的用例：

HTML:
下面是另一个只使用CSS的解决方案，它适用于任何HTML布局

它适用于您需要切换的任何元素。无论您的切换布局是什么，您只需将它放在两个元素中，在切换元素中包含
if collapsed
和
if not 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>


CSS版本：


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



内联编码更容易


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




{{showmore！=null&&showmore？“隐藏更多选项”：“显示更多选项”}
你的小组

有些人可能会对更改引导js（也许是有效的）提出异议，但这里有一个两行方法来实现这一点

在bootstrap.js中，查找Collapse.prototype.show函数并修改this.$trigger调用以添加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>



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的解决方案，效果很好。不过，如果您需要一些快速的方法来尝试，我的解决方案将在本地工作退出。
我下面的JS解决方案比这里的其他方法更好，因为它确保在目标关闭时总是说“打开”，反之亦然

HTML:

示例：


$（“[data toggle secondary]”）。每个（函数（）{
变量$toggle=$（此）；
var originalText=$toggle.text（）；
var secondaryText=$toggle.data（'toggle-secondary'）；
var$target=$（$toggle.attr（'href'））；
$target.on（'show.bs.collapse hide.bs.collapse'，function（）{
如果（$toggle.text（）==originalText）{
$toggle.text（第二个文本）；
}否则{
$toggle.text（原始文本）；
}
});
})；



...

您确实喜欢这样。
函数返回旧文本


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



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

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



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



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