Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

elfojonas

Problema com next() do jQuery

Por , em Javascript

Recommended Posts

elfojonas    0

elfojonas
Postado

Boa tarde pessoal.

Estou com um problema ao utilizar o elemento next() do Jquery em uma aplicação.

O que preciso fazer é criar dois blocos com um botão para exibir detalhes e esconder.

----

Título 1 [bOTÃO]

Texto ....

----

O código que estou utilizando:

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8" />
  	<meta name="viewport" content="width=device-width, initial-scale=1">
  	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <title>Lorem Ipsum</title>
  </head>
  <body>
     	<div class="container">     
        <div class="panel panel-default">
         <div class="panel-heading">
            <h3 class="panel-title">Bloco de conteúdo</h3>
          </div>
          <div class="panel-body">
                       
              <h3>Título 1 <button class="btn btn-default btn-sm btn-mostrar">Detalhes</button></h3> <!-- Estou com problemas aqui, quando inclui o botão dentro do h3 -->
                
                <div class="conteudo">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolorem harum magni optio, natus non nobis quisquam hic neque rem distinctio eos pariatur provident, tenetur dolorum aperiam suscipit aspernatur repellat.Magni et eos cupiditate quis quidem, neque.</p>                 
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolorem harum magni optio, natus non nobis quisquam hic neque rem distinctio eos pariatur provident, tenetur quis veniam deleniti, architecto vel maxime laborum, aliquam necessitatibus. Eos perspiciatis, necessitatibus quisquam neque recusandae eius quo culpa a asperiores!</p>
                </div>
            
              <h3>Título 2</h3>
                <button class="btn btn-default btn-sm btn-mostrar">Detalhes</button> <!-- Dessa forma funciona normalmente mas fica desalinhado -->
                <div class="conteudo"> 
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolorem harum magni optio, natus non nobis quisquam hic neque rem distinctio eos pariatur provident, tenetur dolorum aperiam suscipit aspernatur repellat.Magni et eos cupiditate quis quidem, neque.</p>                 
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolorem harum magni optio, natus non nobis quisquam hic neque rem distinctio eos pariatur provident, tenetur quis veniam deleniti, architecto vel maxime laborum, aliquam necessitatibus. Eos perspiciatis, necessitatibus quisquam neque recusandae eius quo culpa a asperiores!</p>
                </div> 
          </div>
        </div>
      </div>
  
  <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
  <script type="text/javascript">
    function main(){
      $('.conteudo').hide();
      $('.btn-mostrar').on('click',function(){
        $(this).next().slideToggle(400);  

        if ($(this).text() == "Esconder") 
        { 
           $(this).text("Detalhes"); 
        } else { 
           $(this).text("Esconder"); 
        };         
      })
    } 

    $(document).ready(main);
  </script>  
  </body>
</html>

Notem que no bloco "Título 2", quando o botão está fora do h3 funciona corretamente, mas o botão fica embaixo.

Acredito que haja uma forma que eu ainda não encontrei de deixar alinhado a direita do título sem necessidade de forçar algo em CSS.

Agradeço desde já.

Compartilhar este post

Link para o post
Compartilhar em outros sites

leonardo de andrade baessa    16

leonardo de andrade baessa
Postado 


<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8" />
  	<meta name="viewport" content="width=device-width, initial-scale=1">
  	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <title>Lorem Ipsum</title>
    <style type="text/css">
      .panel-body h3{
        float: left;
      }
      .panel-body button {
        margin-top:2%;
        margin-left: 2%;
      }
    </style>
  </head>
  <body>
     	<div class="container">     
        <div class="panel panel-default">
         <div class="panel-heading">
            <h3 class="panel-title">Bloco de conteúdo</h3>
          </div>
          <div class="panel-body">
                       
             <h3>Título 1 </h3> <button class="btn btn-default btn-sm btn-mostrar">Detalhes</button><!-- Estou com problemas aqui, quando inclui o botão dentro do h3 -->
                
                <div class="conteudo">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolorem harum magni optio, natus non nobis quisquam hic neque rem distinctio eos pariatur provident, tenetur dolorum aperiam suscipit aspernatur repellat.Magni et eos cupiditate quis quidem, neque.</p>                 
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolorem harum magni optio, natus non nobis quisquam hic neque rem distinctio eos pariatur provident, tenetur quis veniam deleniti, architecto vel maxime laborum, aliquam necessitatibus. Eos perspiciatis, necessitatibus quisquam neque recusandae eius quo culpa a asperiores!</p>
                </div>
                </div>
            <div class="panel-body">
              <h3>Título 2</h3>
                <button class="btn btn-default btn-sm btn-mostrar">Detalhes</button> <!-- Dessa forma funciona normalmente mas fica desalinhado -->
                <div class="conteudo"> 
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolorem harum magni optio, natus non nobis quisquam hic neque rem distinctio eos pariatur provident, tenetur dolorum aperiam suscipit aspernatur repellat.Magni et eos cupiditate quis quidem, neque.</p>                 
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolorem harum magni optio, natus non nobis quisquam hic neque rem distinctio eos pariatur provident, tenetur quis veniam deleniti, architecto vel maxime laborum, aliquam necessitatibus. Eos perspiciatis, necessitatibus quisquam neque recusandae eius quo culpa a asperiores!</p>
                </div> 
          </div>
        </div>
      </div>
  
  <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
  <script type="text/javascript">
    function main(){
      $('.conteudo').hide();
      $('.btn-mostrar').on('click',function(){
        $(this).next().slideToggle(400);  

        if ($(this).text() == "Esconder") 
        { 
           $(this).text("Detalhes"); 
        } else { 
           $(this).text("Esconder"); 
        };         
      })
    } 

    $(document).ready(main);
  </script>  
  </body>
</html>

Mexi um pouco no css colocando

 <style type="text/css">
      .panel-body h3{
        float: left;
      }
      .panel-body button {
        margin-top:2%;
        margin-left: 2%;
      }
    </style>

e separei as div panel-body caso tenha problema na exibição do texto cria um estilo da div conteudo

Compartilhar este post

Link para o post
Compartilhar em outros sites

elfojonas    0

elfojonas
Postado

Então, dessa forma, e também de algumas outras é possível resolver via CSS mesmo.

Mas gostaria de saber se existe uma forma de fazer o next() pegar o próximo elemento, que deveria ser a class conteúdo.

Parece que o fechamento da tag h3 que está fazendo com que o next se perca.

Compartilhar este post

Link para o post
Compartilhar em outros sites

elfojonas    0

elfojonas
Postado

Na linha 39 eu executo:

 $('.btn-mostrar').on('click',function(){
        $(this).next().slideToggle(400);

Isso faz com que ao clicar no botão, que está na classe .btn-mostrar, o próximo elemento receba o slideToggle(400).

Ou seja, ao clicar no botão, a próxima classe, .conteudo , deveria abrir.

Tendo isso, vamos aos códigos:

1 - Quando coloco o botão fora das tags h3 dá certo, acredito que pelo fato de que o próximo elemento já seja a div, ou seja, o next() localiza a div class="conteudo" e a exibe. Porém, o botão fica abaixo do título

<h3>Título 2</h3>
<button class="btn btn-default btn-sm btn-mostrar">Detalhes</button> <!-- Dessa forma funciona normalmente mas fica desalinhado -->
<div class="conteudo"> 
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolorem harum magni optio, natus non nobis quisquam hic neque rem distinctio eos pariatur provident, tenetur dolorum aperiam suscipit aspernatur repellat.Magni et eos cupiditate quis quidem, neque.</p>                 
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolorem harum magni optio, natus non nobis quisquam hic neque rem distinctio eos pariatur provident, tenetur quis veniam deleniti, architecto vel maxime laborum, aliquam necessitatibus. Eos perspiciatis, necessitatibus quisquam neque recusandae eius quo culpa a asperiores!</p>
</div>

2 - Quando coloco o botão dentro da tag h3 consigo o alinhamento que desejo, porém, o next() do jQuery não funciona mais como gostaria, acredito que seja pelo fato de que há o fechamento </h3>. Sendo assim meu next não encontra a div e sim o fechamento do h3.

<h3>Título 1<button class="btn btn-default btn-sm btn-mostrar">Detalhes</button></h3> <!-- Estou com problemas aqui, quando inclui o botão dentro do h3 -->
                
<div class="conteudo">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolorem harum magni optio, natus non nobis quisquam hic neque rem distinctio eos pariatur provident, tenetur dolorum aperiam suscipit aspernatur repellat.Magni et eos cupiditate quis quidem, neque.</p>                 
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolorem harum magni optio, natus non nobis quisquam hic neque rem distinctio eos pariatur provident, tenetur quis veniam deleniti, architecto vel maxime laborum, aliquam necessitatibus. Eos perspiciatis, necessitatibus quisquam neque recusandae eius quo culpa a asperiores!</p>
</div>

É bem nisso que estou travado, até tentei forçar um next(.conteudo).toggleSlide(400), para ver se ele pegava a próxima classe conteúdo para exibir mas não deu certo também, o resultado acaba sendo o mesmo.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito