Stupid Simple jQuery Accordion Menu

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

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

Απάντηση
eirineli
Δημοσιεύσεις: 1
Εγγραφή: 06 Μαρ 2012 17:42

Stupid Simple jQuery Accordion Menu

Δημοσίευση από eirineli » 06 Μαρ 2012 18:30

Καλησπέρα εδώ και λίγο καιρό μελετώ το συγκεκριμένο jquery script το οποίο ονομάζεται "Stupid Simple jQuery Accordion Menu" !
Μπορείτε να το δείτε εδώ www.stemkoski.com/stupid-simple-jquery-accordion-menu/


Έχω δοκιμάσει το script και κατάφερα να το φέρω σε λειτουργία όμως θα ήθελα να του προσθέσω μια νέα δυνατότητα, την οποία δεν έχει τώρα.

Αυτό που θα ήθελα να κάνω είναι όταν υπάρχει ένα link σε μια άλλη σελίδα πρός το accordion menu πχ με anchor name τότε αυτό να ανοίγει, να εμφανίζεται.

Ο κώδικας που δοκιμάζω έχει ως εξής,

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

<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http&#58;//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
<script type="text/javascript" src="javascript.js"> </script>
</head>

<body>
	<div id="wrapper">

		<div class="accordionButton">Button 1 Content</div>
		<div class="accordionContent">Content 1<br /><br /><br /><br /><br /><br /><br /><br />Long Example</div>
		<div class="accordionButton" name="deiktis">Button 2 Content</div>
		<div class="accordionContent">Content 2<br /><br /><br /><br /><br />Medium Example</div>
		<div class="accordionButton">Button 3 Content</div>

		<div class="accordionContent">Content 1<br />Short Example</div>
		<div class="accordionButton">Button 4 Content</div>
		<div class="accordionContent">Content 4<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Extra Long Example</div>
	</div>
</body>
</html>

Το javascript.js

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

$&#40;document&#41;.ready&#40;function&#40;&#41; &#123;
	 
	//ACCORDION BUTTON ACTION &#40;ON CLICK DO THE FOLLOWING&#41;
	$&#40;'.accordionButton'&#41;.click&#40;function&#40;&#41; &#123;

		//REMOVE THE ON CLASS FROM ALL BUTTONS
		$&#40;'.accordionButton'&#41;.removeClass&#40;'on'&#41;;
		  
		//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
	 	$&#40;'.accordionContent'&#41;.slideUp&#40;'normal'&#41;;
   
		//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
		if&#40;$&#40;this&#41;.next&#40;&#41;.is&#40;'&#58;hidden'&#41; == true&#41; &#123;
			
			//ADD THE ON CLASS TO THE BUTTON
			$&#40;this&#41;.addClass&#40;'on'&#41;;
			  
			//OPEN THE SLIDE
			$&#40;this&#41;.next&#40;&#41;.slideDown&#40;'normal'&#41;;
		 &#125; 
		  
	 &#125;&#41;;
	  
	
$&#40;'.accordionAnchor'&#41;.click&#40;function&#40;&#41; &#123;
$&#40;'.accordionButton'&#41;.removeClass&#40;'on'&#41;;
var watchoo =$&#40;this&#41;.attr&#40;'name'&#41;;
$&#40;"div.accordionButton&#91;name=" + watchoo + "&#93;"&#41;.addClass&#40;'on'&#41;.next&#40;&#41;.slideDown&#40;'normal'&#41;;
&#125;&#41;;

$&#40;"div.accordionButton&#91;name=" + &#40;&#40;window.location.hash&#41;.substr&#40;1&#41;&#41; + "&#93;"&#41;.addClass&#40;'on'&#41;.next&#40;&#41;.show&#40;&#41;;


	/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
	
	//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER 
	$&#40;'.accordionButton'&#41;.mouseover&#40;function&#40;&#41; &#123;
		$&#40;this&#41;.addClass&#40;'over'&#41;;
		
	//ON MOUSEOUT REMOVE THE OVER CLASS
	&#125;&#41;.mouseout&#40;function&#40;&#41; &#123;
		$&#40;this&#41;.removeClass&#40;'over'&#41;;										
	&#125;&#41;;
	
	
	$&#40;'.accordionContent'&#41;.hide&#40;&#41;;

&#125;&#41;;

Και το styles.css

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

#wrapper &#123;
	width&#58; 800px;
	margin-left&#58; auto;
	margin-right&#58; auto;
	&#125;

.accordionButton &#123;	
	width&#58; 800px;
	float&#58; left;
	_float&#58; none;  /* Float works in all browsers but IE6 */
	background&#58; #003366;
	border-bottom&#58; 1px solid #FFFFFF;
	cursor&#58; pointer;
	&#125;
	
.accordionContent &#123;	
	width&#58; 800px;
	float&#58; left;
	_float&#58; none; /* Float works in all browsers but IE6 */
	background&#58; #95B1CE;
	&#125;
	
/***********************************************************************************************************************
 EXTRA STYLES ADDED FOR MOUSEOVER / ACTIVE EVENTS
************************************************************************************************************************/

.on &#123;
	background&#58; #990000;
	&#125;
	
.over &#123;
	background&#58; #CCCCCC;
	&#125;
Και τέλος,
σε μια άλλη σελίδα arxiki.html έχω ένα σύνδεσμο link,

<a href="selida_accordion.html#dektis">Πάτησε για να διαβάσεις το κείμενο</a>

Αυτό που θέλω να κάνω είναι, πατώντας πάνω στο link κάποιος να πηγαίνει στη σελίδα selida_accordion.html και εκεί να του ανοίγεται/ξεδιπλώνεται αυτόματα το κείμενο του accordionContent !

Παράδοξα όμως ενώ δοκιμάζω έτσι όπως παραπάνω δεν μπορώ να το πετύχω να λειτουργήσει ! Μπορείτε να με βοηθήσετε σας παρακαλώ πολύ ;

Τι κάνω λάθος ;

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

Stupid Simple jQuery Accordion Menu

Δημοσίευση από fafos » 06 Μαρ 2012 21:34

sto javascript, akrivos kato apo to $('.accordionContent').hide(); vale auto:

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

var pathname = document.location.hash.substr&#40;1&#41;;	
if&#40;pathname !=''&#41;&#123;
      if&#40;$&#40;".accordionButton&#91;name=" + pathname + "&#93;"&#41;.next&#40;&#41;.is&#40;'&#58;hidden'&#41; == true&#41; &#123;
         
         //ADD THE ON CLASS TO THE BUTTON
         $&#40;".accordionButton&#91;name=" + pathname + "&#93;"&#41;.addClass&#40;'on'&#41;;
          
         //OPEN THE SLIDE
         $&#40;".accordionButton&#91;name=" + pathname + "&#93;"&#41;.next&#40;&#41;.slideDown&#40;'normal'&#41;;
       &#125;
&#125; 
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Απάντηση

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

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

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