guitexa

Dezembro 7, 2015

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;}

Entrar

guitexa

Total de itens

Registro em

Última visita

Tipo de Conteúdo

Perfis

Fóruns

Posts postados por guitexa

Menu deslizante

Navegação

Atividades