Colapso do 'bootstrap' do Twitter: mudar a apresentação do botão de comutação
+
é pressionado. O meu código html é o seguinte:
<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>
existe uma forma de mudar o botão para mostrar {[[2]} em vez de +
depois de a secção ser expandida (e mudar para +
quando for colapsada novamente)?
informações adicionais: esperava que houvesse uma solução simples para o meu problema baseada no twitter-bootstrap/css/html. Todas as respostas até agora faça uso de JavaScript ou PHP. Por causa disso, eu quero adicionar mais informações sobre o meu ambiente de desenvolvimento: eu quero usar esta solução dentro de um site baseado em SilverStripe (versão 3.0.5) que tem algumas implicações para o uso de PHP, bem como JavaScript.
9 answers
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=='+' ? '-' : '+';
});
});
Actualizar com Css puro, pseudo-Elementos
button.btn.collapsed:before
{
content:'+' ;
display:block;
width:15px;
}
button.btn:before
{
content:'-' ;
display:block;
width:15px;
}
Actualizar 2 com Javascript puro
function handleClick()
{
this.value = (this.value == '+' ? '-' : '+');
}
document.getElementById('collapsible').onclick=handleClick;
Aqui está outra solução CSS apenas que funciona com qualquer disposição HTML .
Funciona com qualquer elemento que precise de mudar. Seja qual for a sua disposição de comutação, basta colocá-la dentro de alguns elementos com as classesif-collapsed
e if-not-collapsed
dentro do elemento de comutação.
O único senão é ter a certeza que coloca o estado inicial desejado da comutação. Se estiver inicialmente fechada, então coloque uma classe collapsed
na comutação.
Também requer a Selector, por isso não funciona na IE8.
Exemplo 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>
Menos versão:
[data-toggle="collapse"] {
&.collapsed .if-not-collapsed {
display: none;
}
&:not(.collapsed) .if-collapsed {
display: none;
}
}
Versão CSS:
[data-toggle="collapse"].collapsed .if-not-collapsed {
display: none;
}
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
display: none;
}
Todas as outras soluções publicadas aqui fazem com que a comutação fique fora de sincronia se for clicado duas vezes. A seguinte solução usa os Eventos fornecidos pela estrutura de Bootstrap , e a comutação corresponde sempre ao estado do elemento desmontável:
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('+')
})
Isso deve funcionar para a maioria dos casos.
No entanto, também encontrei um problema adicional ao tentar aninhar um elemento desmontável e a sua comutação. troca dentro de outro elemento desmontável. Com o código acima, quando eu carregar na opção aninhada para esconder o elemento desmontável aninhado, a opção para o elemento pai também muda. Pode ser um bug no Bootstrap. Encontrei uma solução que parece funcionar: adicionei uma classe "colapsada" aos interruptores de comutação( Bootstrap adiciona isto quando o elemento desmontável está escondido, mas eles não começam com ele), e adicionou isso ao selector de jQuery para o hide função:
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')
})
Adicione algum código jquery, você precisa jquery para fazer isso:
<script>
$(".btn[data-toggle='collapse']").click(function() {
if ($(this).text() == '+') {
$(this).text('-');
} else {
$(this).text('+');
}
});
</script>
Eu acho que você poderia olhar dentro do seu código baixado onde exatamente há um sinal {[[2]} (mas isso pode não ser muito fácil).
O que eu faria? Eu encontraria a classe / id dos elementos DOM que contêm o sinal+
(suponha que seja ".collapsible"
, e com Javascript (na verdade jQuery):
<script>
$(document).ready(function() {
var content=$(".collapsible").html().replace("+", "-");
$(".collapsible").html(content));
});
</script>
Editar
Ok... Desculpa não ter visto o código de presilha... mas acho que funciona com algo como slideToggle
, ou slideDown and slideUp
... Imagine que é um slideToggle
para os elementos da classe .collapsible
, que revelam o conteúdo de alguns elementos .info
. Então:
$(".collapsible").click(function() {
var content=$(".collapsible").html();
if $(this).next().css("display") === "none") {
$(".collapsible").html(content.replace("+", "-"));
}
else $(".collapsible").html(content.replace("-", "+"));
});
Isto parece ser a coisa oposta a fazer, mas uma vez que a animação actual é executada em paralelo, você irá verificar o css antes da animação, e é por isso que você precisa de verificar se é visível (o que significa que será escondido assim que a animação estiver completa) e, em seguida, definir o + ou-correspondente.
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);
}
});
});
Exemplos:
$('[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>
- o código é seco e reutilizável Cada botão de colapso fica separado.
- só precisas para colocar uma alteração no HTML: adicionar o atributo
data-toggle-secondary
Eu gostei da solução apenas de CSS do PSL , mas no meu caso eu precisava de incluir algum HTML no botão, e a propriedade de Css de conteúdo está a mostrar o HTML raw com marcas neste caso.
Caso isso possa ajudar outra pessoa, pedi-lhe o violino para cobrir o meu caso de uso. 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;
}
Mais fácil com codificação em linha
<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>
In bootstrap.js, procura o colapso.prototipo.mostrar a função e modificar isto.$trigger call para adicionar a mudança de html do seguinte modo:
this.$trigger
.removeClass('collapsed')
.attr('aria-expanded', true)
.html('Collapse')
Igualmente no colapso.prototipo.esconder a função Mudar para
this.$trigger
.addClass('collapsed')
.attr('aria-expanded', false)
.html('Expand')
Isto irá alternar o texto entre "colapsar" quando tudo for expandido e" expandir " quando tudo for recolhida.
Duas linhas. Terminar.Edite: a longo prazo isto não vai funcionar. arranque.o js faz parte de um pacote Nuget, por isso acho que não estava a promover a minha mudança para o servidor. Como mencionado anteriormente, não é uma boa prática para editar bootstrap.js, então implementei a solução do PSL que funcionou muito bem. No entanto, a minha solução funcionará localmente se precisar de algo rápido apenas para experimentá-lo.