0

Tenho um conjunto de 4 divs com titulo próprio, e ao clicar em cada um eles, é mostrada a informação correspondente, quando a página carrega os divs estão alinhados com margem entre cada um deles, porém, ao clicar num dos divs os restantes movem-se para a direita, sendo que o conteúdo selecionado é mostrado em baixo desse menu, como era suposto.

Já tentei várias formas e nenhumas delas resulta, tentei pelo atributo: position: fixed / static , por * display:block* e simplesmente não consigo fazer com que os elementos não selecionados permaneçam na sua posição inicial, quando se seleciona um outro elemento.

$('.top').on('click', function() {
  $parent_box = $(this).closest('.box');
  $parent_box.siblings().find('.bottom').hide();
  $parent_box.find('.bottom').toggle();
});
.box { 
    	display:block;
    	float:left;
    }

    .box a{
    	display:block
    	margin-top: 175px;
    	font-family: 'Open Sans Condensed';
    	color: #1B3E90 ;
    	text-decoration: none;
    	font-size: 25px
    }

    .bottom{
    	margin-top: 35px;
    	overflow:auto;	
    }

    top:hover {
    	color:#F89326;
    	transform: scale(1.2);
    	display:block
    }

    .top:target {
    	display:block
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"> 	
        <a class="top" > OP1 </a>
    	<div class=" bottom" style="display: none;" > 
                 <!---            ------------- introdução de frames --------------------- -->
           <div class="responsive1" id="img1">
               <div class="img" >
                    <a class="open" href="#">
                     <img src="../img/port/FardamentoUniform/1.JPG" alt=" " >
                    </a>
                    <div class="desc">Add a description of the image here</div>              
                </div>
           </div>                       
           <div class="responsive1" id="img2">   
                <div class="img" >
                    <a class="open" href="#">
                     <img src="../img/port/FardamentoUniform/2.JPG" alt=" " >
                    </a>
                    <div class="desc">Add a description of the image here</div>              
                </div>
           </div>                     
      </div> 	
</div>	 
    <!-- --------------------Proxima Classe de produtos -->
<div class="box" >
  	 <a class="top" > Bibs & Batas </a>
  	 <div class=" bottom" style="display: none;" ><h1> OP2 </h1></div>		
</div>
    
     <!-- --------------------Proxima Classe de produtos -->
<div class="box"  >
    <a class="top"  > Confeções Variadas </a>
    <div class=" bottom" style="display: none;" ><h1> OP3 </h1></div>		
</div>
    		
    
    		<!-- --------------------Proxima Classe de produtos -->
<div class="box" >
    <a class="top"  > Equipamento Desportivo </a>
  	<div class=" bottom" style="display: none;" ><h1> OP4</h1></div>			 
</div>

Como posso fazer isto ? Estou á dois dias de volta deste problema...

1
  • O ideal seria eles ficarem um abaixo do outro ou têm que ficar do lado ? Caso seja o primeiro, basta remover o float:left; da .box 9/11/2016 às 12:37

1 Resposta 1

0

Veja se é isso:

$('.top').on('click', function() {
  $parent_box = $(this).closest('.box');
  $parent_box.siblings().find('.bottom').hide();
  $parent_box.find('.bottom').toggle();
});
.box {
  display: block;
  float: left;
  position: relative;
}
.box a {
  display: block margin-top: 175px;
  font-family: 'Open Sans Condensed';
  color: #1B3E90;
  text-decoration: none;
  font-size: 25px
}
.bottom {
  margin-top: 35px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.responsive1 {
  width: 500px;
}
top:hover {
  color: #F89326;
  transform: scale(1.2);
  display: block
}
.top:target {
  display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <a class="top"> OP1 </a>
  <div class=" bottom" style="display: none;">
    <!---            ------------- introdução de frames --------------------- -->
    <div class="responsive1" id="img1">
      <div class="img">
        <a class="open" href="#">
          <img src="../img/port/FardamentoUniform/1.JPG" alt=" ">
        </a>
        <div class="desc">Add a description of the image here</div>
      </div>
    </div>
    <div class="responsive1" id="img2">
      <div class="img">
        <a class="open" href="#">
          <img src="../img/port/FardamentoUniform/2.JPG" alt=" ">
        </a>
        <div class="desc">Add a description of the image here</div>
      </div>
    </div>
  </div>
</div>
<!-- --------------------Proxima Classe de produtos -->
<div class="box">
  <a class="top"> Bibs & Batas </a>
  <div class=" bottom" style="display: none;">
    <h1> OP2 </h1>
  </div>
</div>

<!-- --------------------Proxima Classe de produtos -->
<div class="box">
  <a class="top"> Confeções Variadas </a>
  <div class=" bottom" style="display: none;">
    <h1> OP3 </h1>
  </div>
</div>


<!-- --------------------Proxima Classe de produtos -->
<div class="box">
  <a class="top"> Equipamento Desportivo </a>
  <div class=" bottom" style="display: none;">
    <h1> OP4</h1>
  </div>
</div>

Modificações:

Criada a classe responsive1 no CSS.

.responsive1 {
  width: 500px;
}

Na classe .box adicionar position: relative;

Na classe .bottom:

.bottom {
  margin-top: 35px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
1
  • é isso mesmo... embora agora as informações da selecção esteja disposicionada. ou seja quando fazemos uma selecção, essa mesma surge no topo, onde deveria estar o cabecalho. vou ver se consigo resolver. Valeu!!
    – Mr_sang
    9/11/2016 às 23:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .