Estoy tratando de implementar un panel desplegable como en la barra superior de Gmail. Si hace clic en el ícono de Configuración, su nombre o el enlace Compartir, se despliega un panel ... ¿hay un complemento jquery o algo que me permita implementar rápidamente algo para dar un efecto similar?

2
Prabhu 20 jul. 2011 a las 03:10

3 respuestas

La mejor respuesta

Aquí hay un jsFiddle que muestra cómo puede implementar algo como esto.

Básicamente, está capturando clics en el elemento del cuerpo, si hicieron clic en la configuración, muestra el div "panel". Si hicieron clic en otra cosa, lo ocultas.

Js:

$(function() {
    $('body').click(function(e) {
        if ($(e.target).attr('id') == 'settings') {
            $('#panel').show();
        } else {
            $('#panel').hide();
        }
    });
});

Html:

<span id="settings">Settings</span>
<div id="panel">
    <ul>
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
    </ul>
</div>

Css:

#panel { display: none;  border: 1px solid #000;}
1
Craig M 19 jul. 2011 a las 23:17

Sí, sugiero usar jQuery (cada vez que use JS). Es realmente fácil crear una capa como esta:

<div id="layer">content</div>
<a id="button" href="#">show</a>
<script type="text/javascript">
$(document)ready(function(){
    $('#layer').hide();
    $('#button').click(function(e){
        e.preventDefault();
        $('#layer').show();
    });
});
</script>
1
Mike 19 jul. 2011 a las 23:16

Si desea una solución de navegador cruzado que no sea jQuery, ayer hice esto para alguien aquí:

http://jsfiddle.net/Paulpro/H4CLU/

Se despliega cuando hace clic en button y se oculta cuando vuelve a hacer clic en él, o en cualquier parte del documento que no sea parte del menú desplegable.

Lo único que necesitarías cambiar es probablemente algunas cosas de CSS para darle un buen estilo.

2
Paul 19 jul. 2011 a las 23:21