hacer clickeable toda el area

[hanscruz]

Pues resulta que tengo un panel collapsable (de los que se abren y se cierran), que me funciona a la perfeccion, pero con un pequeño incoveniente.

Este es el panel tiene una barra clikeable (href que tiene el tamaño de toda la barra y dentro de este un h3 que dice "Titulo del panel"):


Cuando acerco el mouse en cualquier lugar de la barra (incluso en el h3) hace el hover perfectamente cambia el fondo, etc., miren:


Ahora cuando le doy click fuera del area de titulo h3 cierra el panel perfectamente, miren:


Pero cuando le doy click sobre el area del titulo h3 que empieza en la letra T y termina en la letra L, no pasa nada no abre ni cierra el panel, miren:


Para hacer esto uso codigo jquery vendria a ser este:

Primero el html (lo pongo resumido para que se entienda mas):

Código HTML:

<div class="panel_implementacion">
                    <!-- inicio div pimplementacion_cabecera -->
                    <div class="pimplementacion_cabecera">
                        <a href="#" class="pimplementacion_titulo_activo" name="panel_mostrar_contenido" rel="pimplementacion"><h4>titulo del panel</h4></a>
                        <div id="pimplementacion_menu">
                            <a href="#" class="pimplementacion_boton" name="panel_mostrar_menu" rel="pimplementacion"  Accion="MostrableNo" Estado="inactivo"></a>
                            <ul id="pimplementacion_opciones" TipoArea="mostrable">
                                <li><a href="#">configuracion</a></li>
                                <li><a href="#">editar opciones</a></li>
                                <li><a href="#">configuracion</a></li>
                                <li><a href="#">editar opciones</a></li>
                                <li><a href="#">habilitar opciones</a></li>
                                <li><a href="#">quitar preferencias</a></li>
                            </ul>
                        </div>
                    </div>
                    <!-- fin div pimplementacion_cabecera -->
                    <!-- inicio div pimplementacion_cuerpo -->
                    <div id="pimplementacion_cuerpo" Estado="abierto">
                        <!-- inicio div pimplementacion_contenido -->
                        <div id="pimplementacion_contenido">
                            <ol style="list-style: decimal; padding: 10px 15px;">
                                <li>Necesita hacer esta accion</li>
                                <li>Necesita hacer esta accion</li>
                                <li>Necesita hacer esta accion</li>
                                <li>Necesita hacer esta accion</li>
                                <li>Necesita hacer esta accion</li>
                                <li>Necesita hacer esta accion</li>
                                <li>Necesita hacer esta accion</li>
                                <li>Necesita hacer esta accion</li>
                                <li>Necesita hacer esta accion</li>
                                <li>Necesita hacer esta accion</li>
                                <li>Necesita hacer esta accion</li>
                                <li>Necesita hacer esta accion</li>
                                <li>Necesita hacer esta accion</li>
                                <li>Necesita hacer esta accion</li>
                            </ol>
                        </div>
                        <!-- fin div pimplementacion_contenido -->
                        <!-- inicio div pimplementacion_pie -->
                        <div id="pimplementacion_pie">
                            <span><a href="#" class="enlace">saber mas</a></span>
                        </div>
                        <!-- fin div pimplementacion_pie -->
                    </div>
                    <!-- fin div pimplementacion_cuerpo -->
                </div>
 

este es el codigo jquery:

Código Javascript:

$('a[name="panel_mostrar_menu"]').click(function(e){
        {
            e.preventDefault();
            var Estado=$(this).parent().next().attr('Estado');
            var NombreRel=$(this).attr('rel');
            if(Estado=='inactivo')
            {
                $(this).removeClass().addClass(NombreRel+'_boton_activo');
                $(this).next().show();
                $(this).attr('Estado', 'activo');
            }
            else
            {
                $(this).removeClass().addClass(NombreRel+'_boton');
                $(this).next().hide();
                $(this).attr('Estado', 'inactivo');
            }
        }
 

Despues de inverstigar un poco lleque a la conclusion logica que el evento no se dispara, por que el evento se dispara cuando se hace click sobre el enlace no sobre el h3, pero recuerdo una ves que en un tutorial vi como se podia hacer para que con jquery el area sensible al click sea el contenedor (en mi caso el enlace a href) osea el padre y anular a sus hijos(en mi caso anular a h3).

No encuentro ese tutorial por lo que recurro a esta comunidad que un monton de veces me ayudo.

Ya busque en el api de jquery pero tampoco encuentro un ejemplo de como poder hacerlo.

Si se pudera hacer de otra forma tambien vale, cualqueir idea es bienvenida.

Espero haber sido claro y que puedna ayudarme, ya que es urgente.

saludos.


Con un poco de codigo jquery pude hacer que el panel se vea o se oculte dependiendo la situacion en que se encuentre,