twitter bootstrap - Acordeón Bootstrap: ¿cómo hacer clic en el botón completo?

table collapse bootstrap

Question

agrego un menú de acordeón a mi sitio, usando este ejemplo:

<div class="bs-example">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. Menu number one</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<p>Menu number one text</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. Menu number two</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<p>Menu number two</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. Menu number three</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<p>Menu number three</p>
</div>
</div>
</div>
</div>
</div>

Puedes verlo en vivo aquí

¿Sabes cómo puedo hacer clic en el botón completo? Por el momento, solo el título lo hace.

Gracias de antemano

Answer 1

Cree el evento click event .panel-heading y en el evento compruebe si .panel-heading segundo antecesor de .panel-heading es <a class="" href="#colapseXXXXX" data-parent="#accordion" data-toggle="collapse"></a> . Por ejemplo, verificar el valor en href. Luego, si es true trigger, haz clic en <a> .

Prueba este código:

$(''.panel-heading'').on(''click'', function () {
var a = $(this).childen(''.panel-title'').children(''a'');
var ahref = a.prop(''href'');
if (ahref.indexOf(''#collapse'') > -1)
{
a.trigger("click");
}
});

Solución de trabajo:

$(document).ready(function(){
$(''.panel-heading'').on(''click'', function () {
var a = $(this).find(''a'');
var ahref = a.prop(''href'');
if (ahref.indexOf(''#collapse'') > -1)
{
$(''.panel-collapse'').removeClass(''in'');
$(this).next(''div'').addClass(''in'');
}
});
$(".panel-heading a").on(''click'', function(event) {
$(this).closest(''.panel-heading'').trigger(''click'');
return false;
});
});;

Disparar haga clic en causar que el burbujeo vuelva a hacer clic en el evento .panel-heading y .panel-heading esté activando el clic nuevamente haciendo un ciclo infinito. Si trato de prevenirDefault () también evito el comportamiento predeterminado de arranque, así que hacer clic no cambió nada. La solución anterior es la única en mi opinión.

Answer 2

Solo una nota,

¿Intentó sacar el a fuera de la clase h4? entonces en lugar de

 <div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. Menu number one</a>
</h4>
</div>

tratar

 <div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<h4 class="panel-title">1. Menu number one</h4>
</a>
</div>

Answer 3

Sé que este es un hilo viejo, pero tuve el mismo problema y lo resolví de manera más fácil.

Simplemente dale a tu ".panel-title a" una pantalla de bloque

Si los padres divs obtuvieron relleno, establézcalo en 0 y configúrelo en su .panel-title a

.panel-heading{
padding: 0;
}
.panel-title a{
display: block;
padding: 15px;
}

No hay necesidad de .js aquí