Όταν κάνω κλικ σε κάποιο Menu να κλείνει το προηγούμενο

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

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

Απάντηση
Άβαταρ μέλους
DrJim
Δημοσιεύσεις: 459
Εγγραφή: 27 Ιαν 2006 13:30
Τοποθεσία: MY COSMOS

Όταν κάνω κλικ σε κάποιο Menu να κλείνει το προηγούμενο

Δημοσίευση από DrJim » 10 Οκτ 2013 12:21

Καλημέρα σας,

θα μπορούσατε να με βοηθούσατε στο παρακάτω?

πως γίνεται πχ όταν πατάω ένα menu να κλείνουν τα υπόλοιπα?

CSS:

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

<style>
#sitemap, #sitemap ul, #sitemap li&#123;
	margin&#58;0;
	padding&#58;0;
	list-style&#58;none;
&#125;
#sitemap&#123;background&#58;url&#40;../images/line1.gif&#41; repeat-y;&#125;
#sitemap li&#123;
	line-height&#58;20px;
	margin-top&#58;1px;
	position&#58;relative;
	width&#58;100%;
&#125;

#sitemap li a &#123;
	color&#58; #000;
	font-weight&#58; bold;
&#125;

#sitemap li a&#58;hover &#123;
	color&#58; #439c40;
	text-decoration&#58; none;
&#125;

/* IE leaves a blank space where span is added so this is to avoid that */
* html #sitemap li&#123;
	float&#58;left;
	display&#58;inline;
&#125;

#sitemap li a&#123;padding-left&#58;28px;&#125;
#sitemap li span&#123;float&#58;left;position&#58;absolute;top&#58;5px;left&#58;5px;width&#58;13px;height&#58;13px;cursor&#58;auto;font-size&#58;0;&#125;
#sitemap li span, #sitemap li span.collapsed&#123;background&#58;url&#40;http&#58;//www.mixhost.gr/collapsed.gif&#41; no-repeat 0 0; cursor&#58; pointer;&#125; 
#sitemap li span.expanded&#123;background&#58;url&#40;http&#58;//www.mixhost.gr/expanded.gif&#41; no-repeat 0 0;&#125;

/* sub levels */

#sitemap li ul&#123;	
	margin-left&#58;15px;
	background&#58;url&#40;line1.gif&#41; repeat-y;
&#125;
#sitemap li li&#123;	
	background&#58;url&#40;line2.gif&#41; no-repeat 0 0;
&#125;

/* etc. */

/* float fix */

#sitemap&#58;after, #sitemap ul&#58;after&#123;
    content&#58; "."; 
    display&#58; block; 
    height&#58; 0; 
    clear&#58; both; 
    visibility&#58; hidden;
&#125;
#sitemap, #sitemap ul&#123;display&#58;block;&#125;
/*  \*/
#sitemap, #sitemap ul&#123;min-height&#58;1%;&#125;
* html #sitemap, * html #sitemap ul&#123;height&#58;1%;&#125;
 /*  */
#sitemap ul&#123;display&#58;none;&#125;
</style>
JS:

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

<script>
this.sitemapstyler = function&#40;&#41;&#123;
	var sitemap = document.getElementById&#40;"sitemap"&#41;
	if&#40;sitemap&#41;&#123;
		
		this.listItem = function&#40;li&#41;&#123;
			if&#40;li.getElementsByTagName&#40;"ul"&#41;.length > 0&#41;&#123;
				var ul = li.getElementsByTagName&#40;"ul"&#41;&#91;0&#93;;
				ul.style.display = "none";
				var span = document.createElement&#40;"span"&#41;;
				span.className = "collapsed";
				span.onclick = function&#40;&#41;&#123;
					ul.style.display = &#40;ul.style.display == "none"&#41; ? "block" &#58; "none";
					this.className = &#40;ul.style.display == "none"&#41; ? "collapsed" &#58; "expanded";
				&#125;;
				li.appendChild&#40;span&#41;;
			&#125;;
		&#125;;
		
		var items = sitemap.getElementsByTagName&#40;"li"&#41;;
		for&#40;var i=0;i<items.length;i++&#41;&#123;
			listItem&#40;items&#91;i&#93;&#41;;
		&#125;;
		
	&#125;;	
&#125;;

window.onload = sitemapstyler;
</script>
html:

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


<body>
<ul id="sitemap">
			<li><a href="#">First link</a>
				<ul>
					<li><a href="#">Second link</a>
						<ul>
							<li><a href="#">Third link</a>
                            <ul>
								<li><a href="#">Fourth link</a></li>
                            </ul>
						</ul>							
					</li>
				</ul>					
			</li>
            <li><a href="#">New First link</a>
				<ul>
					<li><a href="#">New Second link</a>
						<ul>
							<li><a href="#">New Third link</a>
                            <ul>
								<li><a href="#">New Fourth link</a></li>
                            </ul>
						</ul>							
					</li>
				</ul>					
			</li>			
		</ul>
</body>
</html>

Απάντηση

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

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

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