login  Naam:   Wachtwoord: 
Registreer je!
 Forum

verschillende div's activeren als dropdown

Offline Skatelow - 16/10/2011 17:32
Avatar van SkatelowLid hallo allemaal,
ik wou vragen of er een mogelijkheid was om alle div's met h6 te activeren als dropdown?
Ik wil namelijk verschillende berichten hebben, waarop je kan reageren.
Deze reacties schuiven mooi uit een dropdown divje.
Ik heb in php een while loop die de berichten echoot.
Maar enkel het dropdown van het eerste bericht werkt...

Hier mijn code:(ik heb de delen eruitgehaald.)
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2.     $(document).ready(function() {
  3.       $('td.Reactiedrop_down:eq(0)> div').hide();  
  4.       $('td.Reactiedrop_down:eq(0)> h3').click(function() {
  5.         $(this).next().slideToggle('slow');
  6.       });
  7.     });
  8.  
  9.  
  10. </script>

Dit staat in de head.


php code - Bekijk de code zonder highlighting - Klap code in 
  1. echo "<tr>";
  2. 							             //Reacties ophalen en tellen
  3.  
  4. 									     $aantal1 = mysql_query ("SELECT COUNT(*) FROM groepen_reacties WHERE groep = '" . $_GET['groep'] . "' AND berichtid = '" . $rij['id'] . "'");
  5. 										 $aantal_reacties = mysql_result($aantal1, 0); // het totaal aantal items
  6. 									     $reacties = mysql_query ("SELECT * FROM groepen_reacties WHERE groep = '" . $_GET['groep'] . "' AND berichtid = '" . $rij['id'] . "'");
  7.  
  8. 					                     if ( $aantal_reacties > 0 ) //Als er reacties zijn
  9. 					                     {
  10.  
  11.                                                echo "<td class='Reactiedrop_down'>";      
  12. 	                                           echo "<h6 align='center'>Reacties (" . $aantal_reacties . ")</h3>";    
  13.                                                echo "<div>"; //Dit klapt uit                
  14.                                                while ( mysql_fetch_array ($reacties) > 0)
  15. 						                       {
  16.  
  17. 											   }
  18.                                                echo "</div>"; //Einde van wat uitklapt
  19.                                                echo "</td>";
  20.  
  21.                                          }
  22.                                          else{  //als er nog geen reacties zijn
  23.  
  24.                                              echo " <td colspan='3' class='Reactiedrop_down'> ";     //uitklappen van reactie formulier
  25. 	                                         echo " <h3>Nog geen reacties</h3>";
  26.                                              echo " <div> ";
  27.                                              echo "<p class='blauwe'><i> Er zijn nog geen reacties geplaatst. </i> <br/><br/>" ;
  28.                                              echo "<a class='sbutton' href='GroepReactie.html?groep=" . $_GET['groep'] . "&bericht=" . $rij['id'] . "'> Reageren </a>";
  29.                                              echo "</div>";
  30.                                              echo "</td>"; //einde uitklapbare reacties
  31.  
  32.                                          }

En dit is het reactie gedeelte.

Wat wel werkt is de code van de head meerdere malen kopieren en het nummer bij eq(...) veranderen.
Ik kan hier desnoods een while loop van maken in php die steeds de code kopieert voor elk bericht.
Maar ik vroeg me af of dit niet makkelijker gaat??

5 antwoorden

Gesponsorde links
Offline Sam - 16/10/2011 18:00
Avatar van Sam PHP expert Het valt mij meteen op dat je een h6 opent en een h3 sluit. In je topic zeg je "'alle div's met h6" en in je code staat "$('td.Reactiedrop_down:eq(0)> h3')".. Zeer slordig dus.

Als je al eens zou beginnen met te kiezen tussen h3 en h6 en de tags juist zou schrijven:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. echo "<h6 align='center'>Reacties (" . $aantal_reacties . ")</h6>";


jQuert slaagt er daardoor namelijk niet in om de headers te selecteren en het click event er aan te binden.

Je kan voor de veiligheid ook beter iets specifieker selecteren op die div's. Je selecteert nu gewoon elke div in je td, terwijl je zeer specifiek kan zeggen dat je enkel div's met een bepaalde class wilt selecteren: "div.className". Zowel bij je eerste selector als bij je .next() kan je dit doen.

Om je een werkend voorbeeld te geven:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. 	<head>
  5. 		<title>Tests</title>
  6. 		<script type="text/javascript" src="jquery.js"></script>
  7.  
  8. 	    <script type="text/javascript">
  9. 			$(document).ready(function()
  10. 			{
  11. 				$('div.class').hide();
  12. 				$('h6').click(function()
  13. 				{
  14. 					$(this).next('div.class').slideToggle('slow');
  15. 				});
  16. 			});
  17. 		</script>
  18.  
  19. 	</head>
  20. 	<body>
  21. 		<h6>Header 1</h6>
  22. 			<div class="class">Text 1</div>
  23. 		<h6>Header 2</h6>
  24. 			<div class="class">Text 2</div>
  25. 		<h6>Header 3</h6>
  26. 			<div class="class">Text 3</div>
  27. 		<h6>Header 4</h6>
  28. 			<div class="class">Text 4</div>
  29. 	</body>
  30. </html>
Offline html_user - 16/10/2011 18:16
Avatar van html_user Lid Je moet gewoon de eq weg doen dan lukt het wel.
Offline Sam - 16/10/2011 18:56
Avatar van Sam PHP expert
html_user schreef:
Je moet gewoon de eq weg doen dan lukt het wel.

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $('td.Reactiedrop_down > div').eq(0).hide();
  2. $('td.Reactiedrop_down > h3').eq(0).click();

 
Offline html_user - 17/10/2011 20:23 (laatste wijziging 17/10/2011 20:26)
Avatar van html_user Lid Ik bedoel eerder dit:

$('td.Reactiedrop_down> div').hide();
$('td.Reactiedrop_down> h3').click(function() {
$(this).next().slideToggle('slow');
Offline larssy1 - 18/10/2011 09:55
Avatar van larssy1 MySQL beginner
html_user schreef:
Ik bedoel eerder dit:

$('td.Reactiedrop_down> div').hide();
$('td.Reactiedrop_down> h3').click(function() {
$(this).next().slideToggle('slow');

dan is het geen eq weg..
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.223s