Ir para conteúdo
Fórum Script Brasil

guitexa

Membros
 Perfil  Explorar Conteúdo

  • Total de itens

    1

  • Registro em

  • Última visita

Sobre guitexa

guitexa's Achievements

0

Reputação

  1. guitexa
    Olá, estou ajudando um amigo a editar um site e estou com uma dificuldade com um menu em JS, atualmente se clicar em todos os menus ele vai abrindo e fica tudo aberto, eu gostaria que sempre que eu clicar num menu ele fechasse o que está aberto, para que sempre ficasse um único menu aberto, igual esse site faz: Site onde o menu funciona como eu gostaria Meu site teste funcionando só com o menu Segue abaixo o HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <META name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <META name="apple-touch-fullscreen" content="YES"> <TITLE>Teste</TITLE> <link href="css/deslizante.css" rel="stylesheet" type="text/css"> <script src="js/load.js" type="text/javascript"></script> <script src="js/detect.js" type="text/javascript"></script> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/cod_deslizante.js"></script> </head> <body style="margin-left:0; margin-right:0; padding-top:20px; padding-bottom:0 padding-left:0; padding-right:0; margin-bottom:0"> <div id="header" class="toolbar"> <div id="header-top"> <div id="header2" class="toolbar"> <div id="header-top2"> </div> </div> </div> <div id="home" tab="welcome" spaceid="954010550" selected="true" style="left: 0%;"> <div class="footer"> <div align="center"> <div> <div id="conteudo" align="center" style="margin-top:10px;"> <!-- Começo dos conteúdos --> <div id="box-toggle" class="menus"> <div class="tgl_manual" style="margin-right:15px; margin-left:15px;"> <p style="padding-top:6px;"> <table border="0" cellspacing="0"> <tr> <td><p style="margin-top:-15px;"><img src="svg/baixar_pdf.svg"></p> <p style="padding-top:10px; padding-bottom:12px;"><img src="svg/visu_site.svg"></p></td> </tr> </table> </div> <div class="tgl_plantas" style="margin-right:15px; margin-left:15px;"> <p style="padding-top:6px;"> <table border="0" cellspacing="0"> <tr> <td><p style="margin-top:-15px;"><img src="svg/baixar_pdf.svg"></p> <p style="padding-top:5px; padding-bottom:12px;"><img src="svg/visu_site.svg"></p></td> </tr> </table> </div> <div class="tgl_localizacao" style="margin-right:15px; margin-left:15px; text-align:left;"> <table width="100%" border="0" cellspacing="0" style="padding-top:15px; padding-bottom:10px;"> <tr> <td align="center"><table width="288" border="0" cellspacing="0"> <tr> <td align="left"> <a class="texto_direita3" style="color:#333;">TESTE<br /></a> <a class="texto_direita2" style="color:#555;">TESTE<br /></a> <a class="texto_direita2" style="color:#666;">TESTE<br /></a> <a class="texto_direita2" style="color:#888;">TESTE<br /></a> </td> </tr> </table> </td></tr> </table></a> </div> <div class="tgl_dicas" style="margin-right:15px; margin-left:15px; text-align:left;"> <table width="100%" border="0" cellspacing="0" style="padding-top:10px; padding-bottom:12px;"> <tr> <td align="center"><table width="288" border="0" cellspacing="0"> <tr> <td align="left"> <a class="texto_direita">TESTE</a><br /> <a class="texto_direita">TESTE</a><br /> <a class="texto_direita">TESTE</a><br /> <a class="texto_direita">TESTE</a><br /> <a class="texto_direita">TESTE</a><br /> <a class="texto_direita">TESTE</a><br /> <a class="texto_direita">TESTE</a><br /> <a class="texto_direita">TESTE</a><br /> <a class="texto_direita">TESTE</a><br /> </td> </tr> </table> </td></tr> </table> </div> <div class="tgl_links" style="margin-right:15px; margin-left:15px; text-align:left;"> <table width="100%" border="0" cellspacing="0" style="padding-top:10px; padding-bottom:12px;"> <tr> <td align="center"><table width="288" border="0" cellspacing="0"> <tr> <td align="left"> <a class="texto_direita" target="_blank">TESTE</a><br /> <a class="texto_direita" target="_blank">TESTE</a><br /> <a class="texto_direita" target="_blank">TESTE</a><br /> <a class="texto_direita" target="_blank">TESTE</a><br /> <a class="texto_direita4" target="_blank">TESTE</a> </td> </tr> </table> </td></tr> </table> </div> <div class="tgl_fale" style="margin-right:15px; margin-left:15px; text-align:left; line-height:28px;"> <table width="100%" border="0" cellspacing="0" style="padding-top:10px; padding-bottom:12px;"> <tr> <td align="center"><table width="288" border="0" cellspacing="0"> <tr> <td align="left"> <a class="texto_direita">TESTE</a><br /> <a class="texto_direita">TESTE</a><br /> <a class="texto_direita">TESTE</a><br /> <a class="texto_direita">TESTE</a><br /> <a class="texto_direita">TESTE</a><br /> <font color="#333" style="line-height:19px; font-size:16px;">TESTE</font><br /> <font color="#333" style="line-height:19px; font-size:16px;">TESTE</font><br /> <font color="#333" style="line-height:19px; font-size:16px;">TESTE</font><br /> </td> </tr> </table> </td></tr> </table> </div> </div> <!-- Fim do Conteudo Oculto --> </div></div> </body></html> Segue abaixo o JS: jQuery.fn.toggleText = function(a,b) { return this.html(this.html().replace(new RegExp("("+a+"|"+b+")"),function(x){return(x==a)?b:a;})); } $(document).ready(function(){ $('.tgl_manual').before('<span><div align="center" style="background-color:#fff; height:57px; width:319px;"><div align="center" style="background-color:#DE0000; border-radius: 8px 20px; height:50px; width:319px;"><font style="color:#fff; font:18px Varela Round,Lato,Helvetica,Arial,sans-serif; font-weight:400; position:relative; top:6.5px; margin-left:-1px;">TESTE</font><img style="position:relative; top:12px; padding-left:213px;" src="svg/ico_teste.svg" /><div style="background-color:#fff; position:relative; top:20px; height:7px;"></div></div></span>'); $('.tgl_plantas').before('<span><div align="center" style="background-color:#fff; height:57px; width:319px;"><div align="center" style="background-color:#DE0000; border-radius: 8px 20px; height:50px; width:319px;"><font style="color:#fff; font:18px Varela Round,Lato,Helvetica,Arial,sans-serif; font-weight:400; position:relative; top:6.5px; margin-left:-1px;">TESTE</font><img style="position:relative; top:12px; padding-left:213px;" src="svg/ico_teste.svg" /><div style="background-color:#fff; position:relative; top:20px; height:7px;"></div></div></span>'); $('.tgl_localizacao').before('<span><div align="center" style="background-color:#fff; height:57px; width:319px;"><div align="center" style="background-color:#DE0000; border-radius: 8px 20px; height:50px; width:319px;"><font style="color:#fff; font:18px Varela Round,Lato,Helvetica,Arial,sans-serif; font-weight:400; position:relative; top:6.5px; margin-left:-1px;">TESTE</font><img style="position:relative; top:12px; padding-left:213px;" src="svg/ico_teste.svg" /><div style="background-color:#fff; position:relative; top:20px; height:7px;"></div></div></span>'); $('.tgl_dicas').before('<span><div align="center" style="background-color:#fff; height:57px; width:319px;"><div align="center" style="background-color:#DE0000; border-radius: 8px 20px; height:50px; width:319px;"><font style="color:#fff; font:18px Varela Round,Lato,Helvetica,Arial,sans-serif; font-weight:400; position:relative; top:6.5px; margin-left:-1px;">TESTE</font><img style="position:relative; top:12px; padding-left:213px;" src="svg/ico_teste.svg" /><div style="background-color:#fff; position:relative; top:20px; height:7px;"></div></div></span>'); $('.tgl_links').before('<span><div align="center" style="background-color:#fff; height:57px; width:319px;"><div align="center" style="background-color:#DE0000; border-radius: 8px 20px; height:50px; width:319px;"><font style="color:#fff; font:18px Varela Round,Lato,Helvetica,Arial,sans-serif; font-weight:400; position:relative; top:6.5px; margin-left:-1px;">TESTE</font><img style="position:relative; top:12px; padding-left:213px;" src="svg/ico_teste.svg" /><div style="background-color:#fff; position:relative; top:20px; height:7px;"></div></div></span>'); $('.tgl_fale').before('<span><div align="center" style="background-color:#fff; height:57px; width:319px;"><div align="center" style="background-color:#DE0000; border-radius: 8px 20px; height:50px; width:319px;"><font style="color:#fff; font:18px Varela Round,Lato,Helvetica,Arial,sans-serif; font-weight:400; position:relative; top:6.5px; margin-left:-1px;">TESTE</font><img style="position:relative; top:12px; padding-left:213px;" src="svg/ico_teste.svg" /><div style="background-color:#fff; position:relative; top:20px; height:7px;"></div></div></span>'); $('.tgl_manual').css('display', 'none') $('.tgl_plantas').css('display', 'none') $('.tgl_localizacao').css('display', 'none') $('.tgl_dicas').css('display', 'none') $('.tgl_links').css('display', 'none') $('.tgl_fale').css('display', 'none') $('span', '#box-toggle').click(function() { $(this).next().slideToggle('slow') .siblings('.tgl_manual:visible')('.tgl_plantas:visible')('.tgl_localizacao:visible')('.tgl_dicas:visible')('.tgl_links:visible')('.tgl_fale:visible').slideToggle('slow'); }); }) Segue abaixo o CSS: .menus { color: #333; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size:14px; font-style:normal; } <!-- Função Menu Deslizante --> #box-toggle .tgl {margin-bottom:0px;} #box-toggle span { display:block; cursor:pointer; margin-top:0px; font-family: Arial; font-size:17px; color: #666666; } <!-- Função Load Pagina --> #loader{position:absolute;width:100%;} #conteudo{display:none;} .info{width:100%;float:right;margin-right:2px;margin-top: 2px;}
×
×
  • Criar Novo...