Ir para conteúdo

POWERED BY:

Arquivado

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

wneo

Menu acordion em LOOP

Recommended Posts

Boa tarde!!!!

 

Montei um mecanismo onde você registra dados no banco e visualiza em um menu estilo accordion...Esse menu eu criei com jquery animate sem demais plugins...

 

A questão é q quando clico em um, todos se abrem ao msmo tempo... :upset:

como posso resolver isso?????

 

la vai o codigo:

Menu em LOOP:

<?php 
require("sql_mostra_novidade.php");

while($row = mysql_fetch_array($rs)){

$id_news= $row ['id_news'];
$vers= $row ['vers'];
$sobre_vers= $row ['sobre_vers'];
?>

<div class="menu_vers_wrapp" id="">

<div class="menu_vers_wrapp_tit" id="vers_tit2"><span><?php echo $vers; ?></span></div><!-- /menu_vers_wrapp_tit-->

<div class="menu_vers_opened" id="">

<?php echo $sobre_vers; ?>

</div><!-- /menu_vers_opened-->

</div><!-- /menu_vers_wrapp-->

<?php
}
?>
JS do menu:

/*menu_vers_wrapp*/
$(function() {
    var state = true;
    $( ".menu_vers_wrapp" ).click(function() {
      if ( state ) {
        $( ".menu_vers_wrapp" ).animate({
         
	height:"500"
	 
        }, 500 );
      } else {
        $( ".menu_vers_wrapp" ).animate({
          height:"40"
        }, 600 );
      }
      state = !state;
    });
  });
CSS do menu:

.menu_vers_wrapp{
border:1px solid #e8e8e8;
width:98%;
height:40;
background-color:none;
margin:10 0 0 10;
cursor:pointer;
overflow:hidden;
}

.menu_vers_opened{
border:1px solid #f5f5f5;
width:100%;
height:500;
overflow-y:auto;
margin:0 0 0 0;
background-color:#F8F8FF;
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

Resolvi meu caso utilizando outro mecanismo de accordion..fica a dica pra quem passar pela situação, de usar um mecanismo accordion menu jquery com while php...

Assim vai:

jquery:

$(document).ready(function(){
	$('h2.accordion').click(function(){
		$(this).parent().find('div.accordion').slideToggle("slow");
	});
});
Html:
<div class="exemplo">
	<h2 class="accordion">Título/h2>
	<div class="accordion">
		<p> texto de descrição </p>
	</div>
</div>
Css:

h2.accordion{ cursor: pointer; }
div.accordion{ display: none; }

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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