Problemas com o jQuery slideToggle()

[gremio10 14]

Fala galera, eu estou com um problema, quando uso esse código, e clico em responder, ele abre o formulario, e quando clico em cancelar, ele fecha, até ai era isso que eu queria fazer, o problema é que se eu clico de novo em responder, o que deveria acontecer novamente, buga, e o meu formulario fica na metade e sem o seu css...

 

<?php
   foreach( $this->questions as $_questions )
   {
?>   
<div class="container" id="container_<?php echo $_questions->id ?>">
           <div class="bt_close bt_close_<?php echo $_questions->id ?>"></div>
           <div class="box" id="<?php echo $_questions->id ?>">
               <div class="question-pergunta">
                   <p><?php echo $_questions->pergunta ?></p>
               </div>
               <div class="question-user">
                   <h1><?php echo $_questions->nome ?></h1>
                   <h2><?php echo converteDate( $_questions->date ); ?></h2>
               </div>
               <div class="line-v" id="line-<?php echo $_questions->id ?>"></div>
               <div class="link-answer-<?php echo $_questions->id ?> link-answer">

                   <?php
                       if( is_null( $_questions->resposta ) )
                       {
                   ?>
                           <div class="nova"></div>
                           <div class="botoes">
                               <div class="gonnaHaveLineH"></div>
                               <div class="botoes-exec">
                                   <a href="#"><div class="b_reportar"></div></a>            
                                   <a href="javascript: void(0)" class="answer" id="answer-<?php echo $_questions->id ?>" liga-id-question="<?php echo $_questions->id ?>"><div class="b_resp"></div></a>		
                               </div>
                           </div>
                   <?php
                       }
                       else
                       {
                   ?>
                           <div class="line-h"></div> <br />
                           <h1>Resposta</h1>
                           <p class="text_resposta"><?php echo $_questions->resposta; ?></p>
                           <div class="botoes_edit_promove">
                                   <a href="<?php echo $this->serverUrl( $this->baseUrl( "questions/edit?id=" . $_questions->id ) ) ?>"><div class="b_editar"></div></a>
                               <a href=""><div class="b_promover"></div></a>
                           </div>
                   <?php
                       }
                   ?>
               </div>
               <div class="answer-<?php echo $_questions->id ?>" style="display: none">
                   <form class="respostas_form" action="#" method="post">
                       <h1>Resposta</h1> <br />
                       <textarea name="resposta" cols="116" rows="7" class="question-textarea-<?php echo $_questions->id ?>"></textarea> <br />
                       <input type="hidden" name="perguntas_id" value="<?php echo $_questions->id ?>" />
                       <input type="submit" value=" " class="answer-question" />
                       <input type="button" value=" " class="b_cancelar"  />
                   </form>
               </div><br />
           </div>
       </div>

<script type="text/javascript">
   $( function() {

       var question_id = <?php echo $_questions->id ?>; //id da pergunta
       var height_box_question = $( "#" + question_id ).height(); // altura do box de exibição
       var btn_close = $( ".bt_close_" + question_id ); // botão de deletar
       var line_v = $( "#line-" + question_id ); // linha vertical
       var box_question = $( "#" + question_id ); // div que engloba todos
       var height_form_question = $( ".answer-" + question_id ).height(); //altura do formulario
       var form_question = $( ".answer-" + question_id ); // formulario
       var container = $( "#container_" + question_id ).height(); // altura de toda a div que engloba

       btn_close.css( "marginTop", ( ( parseInt( height_box_question ) - 16 ) / 2 ) ); // coloca o botão deletar no meio     
       line_v.height( height_box_question ); // dá o tamanho do box para a linha vertical

       /**
        *
        */
       $( "#answer-" + question_id ).click( function() {

           $( ".gonnaHaveLineH" ).html( "<div class='line-h'></div>" ); // adiciona uma linha horizontal
           $( ".botoes-exec" ).css( "display", "none" ); // deixa invisivel dois botões

           line_v.height( parseInt( height_box_question ) + parseInt( height_form_question ) ); // da o tamanho do formulario, e soma o tamanho da box original com o tamanho do formulario
           btn_close.css( "marginTop", ( parseInt( height_box_question ) + parseInt( height_form_question ) - 16 ) / 2 ); // coloca o botão deletar no meio  

           form_question.slideToggle( "slow" );
           container.height( height_form_question );

       } );

       /**
        *
        */
       $( ".b_cancelar" ).click( function() {

           line_v.css( "height", height_box_question );
           btn_close.css( "marginTop", ( parseInt( height_box_question ) - 16 ) / 2 );
           form_question.slideToggle( "slow" );
           box_question.height( height_box_question );

           $( ".gonnaHaveLineH" ).css( "display", "none" );
           $( ".botoes-exec" ).css( "display", "block" );            

       } );


   } );
</script>
<?php
   }
?>

 

 

Obrigado

[William Bruno 1501]

não coloque o javascript dentro do loop.

 

trabalhe corretamente com classes e com o objeto this

[gremio10 14]

William, foi a alternativa que eu encontrei para poder trabalhar mais fácil os valores de id de cada box...

[William Bruno 1501]

essa é uma péssima alternativa.

 

faça com classes e navegando no DOM, apartir do objeto this.

esta é a maneira correta, funciona bem.

[gremio10 14]

Ok, irei testar, mas sobre o problema que está ocorrendo, será que é por causa disso ?

[William Bruno 1501]

provavel q sim, por causa da duplicação de chamadas genéricas como essa:

$( ".b_cancelar" ).click( function() {

você está adicionando um listener n vezes, para essa class, sendo n a quantidade de registros e tal..

 

e tb por causa da enorme quantidade de script e de memória que essa tua 'alternativa' gerou.. muito código js, muitos instanciamentos.. muito pesado.. vai bugar mesmo se você continuar por esse caminho ai.