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,

[caricatos]

Tema movido desde javascript

[kokoou]

El <a> tiene display=block ?

[hanscruz]

Gracias por responder kokoou

Y si si tiene display block.

saludos.

[tredio]

por que no usas como selector pimplementacion_cabecera?

es decri en ves de $('a[name="panel_mostrar_menu"]') esto $('.pimplementacion_cabecera')

[hanscruz]

Tredio eso no seria posible ya que la cabecera incluye al menu de opciones en la derecha, si hago lo que tu dices el area clickeable seria todo el ancho de la barra y yo solo quiero que sea la barra hasta donde termina el menu.

De todas maneras ya probe con hacer cambios de seleccion pero ese no es el problema, el problema es que el h3 tiene un area sensible propia y no permite ejecutar el evento del padre en esa area.

Ya probre quitando el h3 y funciona perfetamente. La verdad nose como solucionarlo.

Gracias por responder y saludos.

[Dany_s]

cual es el elemento que tiene la flecha?

el link con clase 'pimplementacion_boton'?

[hanscruz]

Si exacto esta como fondo

El codigo del css es este:

Código CSS:

a.pimplementacion_titulo_activo {display: block; width: 408px; height: 24px; background: #efc02a url(inicio_img/ico_abierto.png) no-repeat 8px 7px; font-weight: bold; text-decoration: none; float: left;}
a.pimplementacion_titulo_activo:hover {background: #D29B15 url(inicio_img/ico_abierto_hover.png) no-repeat 8px 7px;}
a.pimplementacion_titulo_activo h4 {margin: 5px 0 0 24px; color: #000;}
a.pimplementacion_titulo_activo:hover h4 {color: #fff;}
 
a.pimplementacion_titulo_inactivo {display: block; width: 408px; height: 24px; background: #efc02a url(inicio_img/ico_cerrado.png) no-repeat 8px 7px; font-weight: bold; text-decoration: none; float: left;}
a.pimplementacion_titulo_inactivo:hover {background: #D29B15 url(inicio_img/ico_cerrado_hover.png) no-repeat 8px 7px;}
a.pimplementacion_titulo_inactivo h4 {margin: 5px 0 0 24px; color: #000;}
a.pimplementacion_titulo_inactivo:hover h4 {color: #fff;}
 

Saludos.