[SOLVED] Accordion menu με javascript και php

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Apostolis_38
Δημοσιεύσεις: 1969
Εγγραφή: 14 Φεβ 2008 16:20
Τοποθεσία: ΠΕΙΡΑΙΑΣ

[SOLVED] Accordion menu με javascript και php

Δημοσίευση από Apostolis_38 » 27 Μάιος 2010 12:21

Καλημέρα σε όλους.

έχω φτιάξει το εξής accordion menu

Κώδικας: Επιλογή όλων

//---EXECUTE QUERY
		$query1_1 = "SELECT * FROM πίνακας ORDER BY id ASC";
		$result1_1 = mysql_query($query1_1);
		
//---PRINT RESULTS
		while ($row=mysql_fetch_assoc($result1_1) ) {
			?><div id="menu" class="titles">
			<a href="javascript&#58;toggle&#40;'<?php echo $row&#91;"name"&#93;;?>'&#41;"><?php echo $row&#91;"name"&#93;;?></a>
			<ul id="<?php echo $row&#91;"name"&#93;;?>" class="index_menu_text"><?php

//---EXECUTE QUERY
			$catid = &#40;int&#41; $row&#91;"id"&#93;;
			$query1_2 = "SELECT πεδία
			FROM πίνακες
			WHERE 
			AND 
			ORDER BY ASC";
			$result1_2 = mysql_query&#40;$query1_2&#41;;
			$num_results1_2 = mysql_num_rows&#40;$result1_2&#41;;
//---IF RESULTS FOUND
			if&#40;$num_results1_2 != 0&#41; &#123;
//---PRINT RESULTS
				while &#40;$row=mysql_fetch_assoc&#40;$result1_2&#41; &#41; &#123;
					?><li><a href="αρχείο.php?bid=<?php echo $row&#91;"bid"&#93;;?>"><?php echo $row&#91;"bname"&#93;;?></a></li><?php
				&#125;
//---CLOSE if&#40;$num_results1_2 != 0&#41; LOOP
			&#125;
//---ELSE PRINT MESSAGE
			else &#123;
				?><li><font color="#FFFFFF">Δεν βρέθηκαν προϊόντα.</font></li><?php
			&#125;
?>
</ul>
</div>
<script type="text/javascript"> 
document.getElementById&#40;'menu'&#41;.style.listStyle="none";
document.getElementById&#40;'<?php echo $row&#91;"name"&#93;;?>'&#41;.style.display="none"; // collapse list 
document.getElementById&#40;'<?php echo $row&#91;"name"&#93;;?>'&#41;.style.display="none"; // collapse list 
function toggle&#40;list&#41;&#123; 
var listElementStyle=document.getElementById&#40;list&#41;.style; 
if &#40;listElementStyle.display=="none"&#41;&#123; 
listElementStyle.display="block"; 
 &#125;
else&#123; listElementStyle.display="none"; 
 &#125; 
&#125;
</script>
Το μενού δουλεύει αλλά το πρόβλημα είναι ότι όταν μπαίνεις στην σελίδα για πρώτη φορά είναι ανοιχτό το μενού της πρώτης εγγραφής.
Αυτό που θέλω είναι να είναι "κλειστό" το μενού και να κάνει expand μόνο όταν κάνεις κλίκ επάνω στο link που θέλεις.

ένας τρόπος που σκέφτηκα ήταν να βάλω αυτό

Κώδικας: Επιλογή όλων

?><div id="<?php echo $row&#91;"id"&#93;;?>" class="titles">
στο πρώτο query
και στο javascript το

Κώδικας: Επιλογή όλων

document.getElementById&#40;'<?php echo $row&#91;"id";?>'&#41;.style.listStyle="none";
αλλά δεν αλλάζει τίποτα.

Εχει κανείς καμμιά ιδέα;
Τελευταία επεξεργασία από το μέλος Apostolis_38 την 28 Μάιος 2010 12:14, έχει επεξεργασθεί 1 φορά συνολικά.

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

[SOLVED] Accordion menu με javascript και php

Δημοσίευση από fafos » 27 Μάιος 2010 18:50

dosto san aplh html (apo ton kodika ths selidas pou to emfanizei) giati etsi einai psilomperdema...

Apostolis_38
Δημοσιεύσεις: 1969
Εγγραφή: 14 Φεβ 2008 16:20
Τοποθεσία: ΠΕΙΡΑΙΑΣ

[SOLVED] Accordion menu με javascript και php

Δημοσίευση από Apostolis_38 » 27 Μάιος 2010 18:56

Εννοείς μόνο το <div id="menu"> ή και το javascript μαζί;

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

[SOLVED] Accordion menu με javascript και php

Δημοσίευση από fafos » 27 Μάιος 2010 18:59

Apostolis_38 έγραψε:Εννοείς μόνο το <div id="menu"> ή και το javascript μαζί;
div, lista kai javascript(s)

Apostolis_38
Δημοσιεύσεις: 1969
Εγγραφή: 14 Φεβ 2008 16:20
Τοποθεσία: ΠΕΙΡΑΙΑΣ

[SOLVED] Accordion menu με javascript και php

Δημοσίευση από Apostolis_38 » 27 Μάιος 2010 19:05

Ναι αλλά έτσι θα πρέπει να βάλω τις αρχικές εγγραφές καρφωτά και να μην τις τραβάει από τη βάση.
Μπέρδεμα ε; :evil:

edit: Βασικά το πρόβλημα είναι οτι πάει και "ανοίγει" την πρώτη εγγραφή που βρίσκει στη βάση. θα κοιτάξω μήπως το ξεγελάσω καρφώνοντας καμμία null εγγραφή.

Ευχαριστώ πάντως.

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

[SOLVED] Accordion menu με javascript και php

Δημοσίευση από fafos » 27 Μάιος 2010 19:10

Apostolis_38 έγραψε:Ναι αλλά έτσι θα πρέπει να βάλω τις αρχικές εγγραφές καρφωτά και να μην τις τραβάει από τη βάση.
Μπέρδεμα ε; :evil:

edit: Βασικά το πρόβλημα είναι οτι πάει και "ανοίγει" την πρώτη εγγραφή που βρίσκει στη βάση. θα κοιτάξω μήπως το ξεγελάσω καρφώνοντας καμμία null εγγραφή.

Ευχαριστώ πάντως.
re sy.. deksi klik sthn selida kai dose ton kodika.. den leitourgei h selida?

Apostolis_38
Δημοσιεύσεις: 1969
Εγγραφή: 14 Φεβ 2008 16:20
Τοποθεσία: ΠΕΙΡΑΙΑΣ

[SOLVED] Accordion menu με javascript και php

Δημοσίευση από Apostolis_38 » 27 Μάιος 2010 19:16

Με μπέρδεψες.
Τον κώδικα θέλεις σαν html; :roll:

edit:

Ορίστε λοιπόν:

Κώδικας: Επιλογή όλων

div id="left-menu-color"><div id="menu" class="titles"><a href="javascript&#58;toggle&#40;'MASITA'&#41;">MASITA</a>
			<ul id="MASITA" class="index_menu_text"><li><a href="subsubcat.php?subcatid=1">MASITA ΠΟΔΟΣΦΑΙΡΟ</a></li><li><a href="subsubcat.php?subcatid=2">MASITA ΜΠΑΣΚΕΤ</a></li><li><a href="subsubcat.php?subcatid=3">MASITA ΒΟΛΛΕΥ</a></li><li><a href="subsubcat.php?subcatid=4">MASITA ΠΟΛΟ</a></li></ul>

</div>
<script type="text/javascript"> 
document.getElementById&#40;'menu'&#41;.style.listStyle="none";
document.getElementById&#40;''&#41;.style.display="none"; // collapse list 
function toggle&#40;list&#41;&#123; 
var listElementStyle=document.getElementById&#40;list&#41;.style; 
if &#40;listElementStyle.display=="none"&#41;&#123; 
listElementStyle.display="block"; 
 &#125;
else&#123; listElementStyle.display="none"; 
 &#125; 
&#125;
</script>
<div id="menu" class="titles"><a href="javascript&#58;toggle&#40;'LOTTO'&#41;">LOTTO</a>
			<ul id="LOTTO" class="index_menu_text"><li><font color="#FFFFFF">Δεν βρέθηκαν προϊόντα.</font></li></ul>
</div>
<script type="text/javascript"> 
document.getElementById&#40;'menu'&#41;.style.listStyle="none";
document.getElementById&#40;'LOTTO'&#41;.style.display="none"; // collapse list 
function toggle&#40;list&#41;&#123; 
var listElementStyle=document.getElementById&#40;list&#41;.style; 
if &#40;listElementStyle.display=="none"&#41;&#123; 
listElementStyle.display="block"; 
 &#125;
else&#123; listElementStyle.display="none"; 
 &#125; 
&#125;
</script>
</div>

Οπως φαίνεται κι απο εδώ την πρώτη φορά το document.getElementById είναι κενό

Κώδικας: Επιλογή όλων

document.getElementById&#40;''&#41;.style.display="none"; // collapse list 
ενώ τη δεύτερη όλα ok

Κώδικας: Επιλογή όλων

document.getElementById&#40;'LOTTO'&#41;.style.display="none"; // collapse list 

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

[SOLVED] Accordion menu με javascript και php

Δημοσίευση από fafos » 27 Μάιος 2010 19:41

try this:

Κώδικας: Επιλογή όλων

<script type="text/javascript">
document.getElementById&#40;'menu'&#41;.style.listStyle="none";
document.getElementById&#40;'MASITA'&#41;.style.display="none"; // EDO EKANA THN ALLAGH
function toggle&#40;list&#41;&#123;
var listElementStyle=document.getElementById&#40;list&#41;.style;
if &#40;listElementStyle.display=="none"&#41;&#123;
listElementStyle.display="block";
 &#125;
else&#123; listElementStyle.display="none";
 &#125;
&#125;
</script>

Apostolis_38
Δημοσιεύσεις: 1969
Εγγραφή: 14 Φεβ 2008 16:20
Τοποθεσία: ΠΕΙΡΑΙΑΣ

[SOLVED] Accordion menu με javascript και php

Δημοσίευση από Apostolis_38 » 27 Μάιος 2010 22:37

Θα το δοκιμάσω αύριο παληκάρι γιατί τώρα κάνω τη σιέστα μου :D και θα σου πω.

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

[SOLVED] Accordion menu με javascript και php

Δημοσίευση από fafos » 27 Μάιος 2010 22:52

Apostolis_38 έγραψε:Θα το δοκιμάσω αύριο παληκάρι γιατί τώρα κάνω τη σιέστα μου :D και θα σου πω.
vlepontas ton php kodika, nomizo oti to provlhma einai oti den pairnei to id sto javascript.. dokimase na valeis to javascript na ektyponetai mesa sto while...

Apostolis_38
Δημοσιεύσεις: 1969
Εγγραφή: 14 Φεβ 2008 16:20
Τοποθεσία: ΠΕΙΡΑΙΑΣ

[SOLVED] Accordion menu με javascript και php

Δημοσίευση από Apostolis_38 » 27 Μάιος 2010 22:56

Αν θυμάμαι καλά εμφανίζονται όλα τα μενού ανοιγμένα έτσι.
Ες αύριον τα σπουδαία...

Apostolis_38
Δημοσιεύσεις: 1969
Εγγραφή: 14 Φεβ 2008 16:20
Τοποθεσία: ΠΕΙΡΑΙΑΣ

[SOLVED] Accordion menu με javascript και php

Δημοσίευση από Apostolis_38 » 28 Μάιος 2010 11:59

Επιασε η ιδέα σου.
Την άλλαξα λίγο αλλά είναι επάνω στο κόλπο που πρότεινες:

Στο link για το toggle βάζουμε να τραβάει το id αντί για το name,

Κώδικας: Επιλογή όλων

<a href="javascript&#58;toggle&#40;'<?php echo $row&#91;"id"&#93;;?>'&#41;">
στο javascript βάζουμε μία δεύτερη εγγραφή όπου τραβάμε πάντα την πρώτη εγγραφή της βάσης

Κώδικας: Επιλογή όλων

document.getElementById&#40;'<?php echo $row&#91;"id"&#93;;?>'&#41;.style.display="none"; // collapse list 
document.getElementById&#40;'<?php echo $row&#91;"id"&#93; = "1";?>'&#41;.style.display="none"; // collapse list 
και όλα καλά.

Θένκ γιου μαν.

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 2 επισκέπτες