Foros del Web » Programando para Internet » Jquery »

Menu desplegable (Ver / Ocultar)

Estas en el tema de Menu desplegable (Ver / Ocultar) en el foro de Jquery en Foros del Web. BUenos dias amigos. Tengo un menu desplegable en donde en cada menu principal tiene la opcion de dar clic para ver u ocultar sus subenlaces. ...
  #1 (permalink)  
Antiguo 24/05/2014, 09:34
 
Fecha de Ingreso: septiembre-2013
Ubicación: Bogota
Mensajes: 139
Antigüedad: 10 años, 6 meses
Puntos: 0
Menu desplegable (Ver / Ocultar)

BUenos dias amigos. Tengo un menu desplegable en donde en cada menu principal tiene la opcion de dar clic para ver u ocultar sus subenlaces. Lo que pasa es que cuando abro la pagina el menu aparece de una vez con sus sublinks mostrados y lo que quiero es que aparezcan ocultos a primera vista. Ya si el usuario quiere visualizarlos entonces debe darle clic en la opcion de ver u ocultar.

Este es el js que realiza la función:

Código Javascript:
Ver original
  1. //  Andy Langton's show/hide/mini-accordion @ http://andylangton.co.uk/jquery-show-hide
  2.  
  3. // this tells jquery to run the function below once the DOM is ready
  4. $(document).ready(function() {
  5.  
  6. // choose text for the show/hide link - can contain HTML (e.g. an image)
  7. var showText='Ver';
  8. var hideText='Ocultar';
  9.  
  10. // initialise the visibility check
  11. var is_visible = false;
  12.  
  13. // append show/hide links to the element directly preceding the element with a class of "toggle"
  14. $('.toggle').prev().append(' <a href="#" class="toggleLink">'+hideText+'</a>');
  15.  
  16. // hide all of the elements with a class of 'toggle'
  17. $('.toggle').show();
  18.  
  19. // capture clicks on the toggle links
  20. $('a.toggleLink').click(function() {
  21.  
  22. // switch visibility
  23. is_visible = !is_visible;
  24.  
  25. // change the link text depending on whether the element is shown or hidden
  26. if ($(this).text()==showText) {
  27. $(this).text(hideText);
  28. $(this).parent().next('.toggle').slideDown('slow');
  29. }
  30. else {
  31. $(this).text(showText);
  32. $(this).parent().next('.toggle').slideUp('slow');
  33. }
  34.  
  35. // return false so any link destination is not followed
  36. return false;
  37.  
  38. });
  39. });

Este es el menu:

Código HTML:
Ver original
  1. <aside id="sidebar" class="column">
  2.         <hr/>
  3.         <h3>Configuraci&oacute;n b&aacute;sica</h3>
  4.         <ul class="toggle">
  5.             <li class="icn_categories"><a href='../basicas/tipo_ident.php' target="principal">Tipo de identificaci&oacute;n</a></li>
  6.             <li class="icn_categories"><a href='../basicas/tipo_anexo.php' target="principal">Tipo de anexo</a></li>
  7.             <li class="icn_categories"><a href='../basicas/dependencias.php' target="principal">Dependencias</a></li>
  8.             <li class="icn_categories"><a href='../basicas/estado_doc.php' target="principal">Estado del documento</a></li>
  9.             <li class="icn_categories"><a href='../basicas/departamentos.php' target="principal">Departamentos de Colombia</a></li>
  10.             <li class="icn_categories"><a href='../basicas/municipios.php' target="principal">Municipios de Colombia</a></li>
  11.             <li class="icn_categories"><a href='../basicas/tipos_usuario.php' target="principal">Perfiles de usuarios</a></li>
  12.             <li class="icn_categories"><a href='../basicas/estado_tramite.php' target="principal">Estado del tr&aacute;mite</a></li>
  13.             <li class="icn_categories"><a href='../basicas/tipo_documento.php' target="principal">Tipo de tr&aacute;mite</a></li>
  14.             <li class="icn_categories"><a href='../basicas/zona_viv.php' target="principal">Zona de residencia</a></li>
  15.             <li class="icn_categories"><a href='../basicas/barrios_veredas.php' target="principal">Barrios y veredas de residencia</a></li>
  16.             <li class="icn_categories"><a href='../basicas/prioridad.php' target="principal">Prioridad del tr&aacute;mite</a></li>
  17.             <li class="icn_categories"><a href='../basicas/nivel.php' target="principal">Nivel de usuarios</a></li>
  18.         </ul>
  19.         <h3>Usuarios</h3>
  20.         <ul class="toggle">
  21.             <li class="icn_add_user"><a href='../usuarios/externo.php' target="principal">Crear usuario externo</a></li>
  22.             <li class="icn_add_user"><a href="#">Crear funcionarios</a></li>
  23.             <li class="icn_view_users"><a href="#">Visualizar usuarios</a></li>
  24.             <!--  <li class="icn_profile"><a href="#">Your Profile</a></li>-->
  25.         </ul>
  26.         <h3>Documentos</h3>
  27.         <ul class="toggle">
  28.             <li class="icn_folder"><a href="#">Crear documentos</a></li>
  29.             <li class="icn_photo"><a href="#">Gallery</a></li>
  30.             <li class="icn_audio"><a href="#">Audio</a></li>
  31.             <li class="icn_video"><a href="#">Video</a></li>
  32.         </ul>
  33.         <h3>Admin</h3>
  34.         <ul class="toggle">
  35.             <li class="icn_settings"><a href="#">Options</a></li>
  36.             <li class="icn_security"><a href="#">Security</a></li>
  37.             <li class="icn_jump_back"><a href="http://www.forosdelweb.com/f13/inicio_sesion/logout1.php" target="_top">Cerrar sesi&oacute;n</a></li>
  38.         </ul>
  39.        
  40.         <footer>
  41.             <hr />
  42.        
  43.         </footer>
  44.     </aside><!-- end of sidebar -->


Esta es una imagen de como me aparece el menu a primera vista.
http://www.subirimagenes.net/i/140524053723155132.png

Bueno espero me puedan colaborar. Se los agradecería mucho
  #2 (permalink)  
Antiguo 24/05/2014, 10:13
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Respuesta: Menu desplegable (Ver / Ocultar)

Hola:

Tener visible los enlaces es lo normal si quieres tener la página "accesible"... se ocultan al producirse el evento de carga de la página. Imagínate que tus visitantes tienen desactivado javascript... estando los enlaces ocultos, nunca se mostrarán.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 24/05/2014, 12:15
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: Menu desplegable (Ver / Ocultar)

Pues, previamente debiste ocultarlos desde la hoja de estilos y el efecto del despliegue lo hacías ya sea con CSS o con JS.

Aunque es offtopic, te dejo este ejemplo de menú desplegable que hice hace un tiempo con CSS: http://jsfiddle.net/7Q9mJ/

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Etiquetas: desplegable, funcion, html, javascript, js, php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:48.