twitter-bootstrap - instalar - bootstrap ruby on rails

Twitter Bootstrap icono de acordeón no cambia

Question

Tengo esta cosa de acordeón de bootstrap. Los iconos de flecha apuntan hacia abajo .

Luego hago clic en Competencia1, obtengo (icono Competencia1 arriba , icono Competencia2 abajo ):

Pero, si hago clic en Competency2 ahora, obtengo (el ícono de Competency1 aún está arriba , el ícono de Competency2 arriba ):

¿Es esto un error en bootstrap, o podría ser arreglado fácilmente?

Gracias.

Answer 1

Es difícil ofrecer sugerencias sin ver tu código. Es posible que esté activando el intercambio de imagen solo en el evento ''show'' (verifique si hay errores tipográficos en sus js).

Esto es lo que uso para crear el mismo efecto en mis sitios:

HTML:

<div class="accordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<i class="icon-chevron-down"></i>
Collapsible Group Item #1
</a>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
<i class="icon-chevron-down"></i>
Collapsible Group Item #2
</a>
</div>
</div>
</div>

JavaScript:

$(''.accordion'').on(''show hide'', function (n) {
$(n.target).siblings(''.accordion-heading'').find(''.accordion-toggle i'').toggleClass(''icon-chevron-up icon-chevron-down'');
});

Answer 2

Este es un error en bootstrap. Si inspecciona su marca al alternar uno de los encabezados que tiene una clase de .accordion-toggle, se alterna para que la clase no esté colapsada. Cuando hace clic en un encabezado diferente al que está abierto, aunque no agrega la clase de colapsado en el encabezado del elemento abierto. Esto me lo arregló:

$(''.accordion-toggle'').click(function() {
if($(this).hasClass(''collapsed'')) {
$(''.accordion-toggle'').not(this).addClass(''collapsed'');
}
});

Answer 3

Parece que esto está ocurriendo porque al hacer clic en Competency2 se colapsa Competency1 cuando Competency1 ya está abierto. Debido a que no hay un evento de clic que ocurra en Competencia1 cuando se colapsa de esta manera, el cursor todavía está apuntando hacia arriba.

Answer 4

Puede utilizar este código, para cambiar los iconos.

Parte del guión:

jQuery(''document'').ready(function() {
$(''.accordion'').on(''show hide'', function (n) {
var targetEle = $(n.target).siblings(''.accordion-heading'').find(''.accordion-toggle'');
if($(n.target).hasClass("in")){
targetEle.children(".icon-chevron-down").show();
targetEle.children(".icon-chevron-up").hide();
}
else{
targetEle.children(".icon-chevron-down").hide();
targetEle.children(".icon-chevron-up").show();
}
});
});

Nota: Para usar este código, en la parte html, debe incluir ambas etiquetas de imagen, es decir. chevron-up y chevron-down.

Answer 5

Usando jquery.js 1.10.2 y bootstrap-collapse.js v2.3.0, este es un refrito de lo anterior. Al cargar el documento, colapsa todos los elementos, excepto el primero, y luego maneja los eventos de mostrar / ocultar.

$(document).ready(function () {
$(".accordion-body").on("shown", function (evt) {
setIcon(evt.target, true);
});
$(".accordion-body").on("hidden", function (evt) {
setIcon(evt.target, false);
});
$(".accordion-body").collapse("hide");
$("#collapse-faq-1").collapse("show");
});
function setIcon(acdBody, isShown) {
var indicator = "indicator" + acdBody.id.substr(acdBody.id.lastIndexOf("-"));
if (!isShown) {
$("#" + indicator).removeClass("icon-chevron-up").addClass("icon-chevron-down");
} else {
$("#" + indicator).removeClass("icon-chevron-down").addClass("icon-chevron-up");
}
}

HTML:

<div class="accordion" id="accordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-1">
<i id="indicator-1" class="icon-chevron-down"></i>&nbsp;&nbsp;
FAQ Item 1
</a>
</div>
<div id="collapse-faq-1" class="accordion-body collapse in">
<div class="accordion-inner">
Answer 1 ...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-2">
<i id="indicator-2" class="icon-chevron-down"></i>&nbsp;&nbsp;
FAQ Item 2
</a>
</div>
<div id="collapse-faq-2" class="accordion-body collapse in">
<div class="accordion-inner">
Answer 2 ...
</div>
</div>
</div>
</div>