html.de - Hintergrundfarbe bei Klick auf Textfeld ändern - Variante 2

by SpiceLab

HTML

<!-- Linke Navigation -->
	<div id="Navigation_Links">	
	  <ul id="nav">
	    <li class="expand"> <div class="ordner"> &nbsp;&nbsp;&nbsp;&nbsp; Über das IQB </div>
			<ul>
				<li><a href="PDF/Einbauerklaerung_2006-42-EG_Muster.pdf" class="embed-link">&#xbb; Einbauerklaerung_2006-42-EG_Muster</a></li>
				<li><a href="PDF/a.pdf" class="embed-link"> &#xbb; Einbauerklaerung_2006-42-EG_Muster </a></li>
				<li>Partner/Links</li>
			</ul>
		</li>		
		 <li class="expand"> <div class="ordner"> &nbsp;&nbsp;&nbsp;&nbsp; Bildungsstandards  </div>
			<ul>
				<li>Aufgabenbeispiele</li>
				<li>EMSE</li>
			     <li class="expand"> <div class="ordner"> &nbsp;&nbsp;&nbsp;&nbsp; Downloadserver </div>
					<ul>
						<li>Audiofiles</li>
						<li>Videofiles</li>
					</ul>
				</li>
			</ul>
		</li>		
    <li class="expand"> <div class="ordner"> &nbsp;&nbsp;&nbsp;&nbsp; Arbeitsbereiche</div>
      <ul>
        <li>foo</li>
        <li>bar</li>
      </ul>
    </li>			
	</ul>	
</div>

CSS

/*Linke Navigation -----------------------------------*/

	#nav {
		
		padding-left:5px;
		padding-top: 15px;
		
		color:black;
		font: 12px Verdana,Arial;
        clear:both;
    }
	
	.ordner,.ordnerOffen {
		
		padding:10px;
		display:block;
		margin-right:-10px;
		overflow:hidden;
		margin-top:-5px;
		margin-bottom:-5px;
		margin-left:-20px;
	}
	
	.ordnerOffen {
		
		color:white;
    background-color:#333;
		
	}
	
	a {
		text-decoration:none;
		color: black;
		padding: 5px 5px 5px 15px;
		display: block;
	}

	ul, li {
		list-style: none;		
	}

	#nav li {
		/*padding: 2px 2px 2px 15px;*/
		cursor: default;
		margin-right:-10px;
		overflow:hidden;
		/*border-top:1px solid black;*/
	    
    }
		

	#nav ul {
		/*display: none;*/ /* Deaktiviert; jQuery versteckt die Submenüs. Ist JS im Browser deaktiviert, sind die Submenüs sichtbar */
		background: url(img/dots.png) repeat-y scroll 10px 0px transparent; 
		
		margin-top:5px;
 	
	}
  
  #nav .showSubnav {
  display: block !important;
}
		
	
	#nav  li.expand {
		background: url(img/folder.png) no-repeat scroll 0px 6px transparent;	
		border-bottom: 1px solid #000;
		padding: 5px 5px 5px 16px;
		border-top:1px solid black;
		
	}

	.expanded {
		background: url(img/folder.open.png) no-repeat scroll 0px 7px transparent !important; 
		border-bottom: 1px solid #000;
	
	}

	#nav li a:hover {
    text-decoration: none;
    color: #F6F1F1;
	border-width:1px;	
    border-style:solid;
	border-left: black;
	
    }
	
	
	#nav ul a:hover {
    text-decoration: none;
    color: #000000;
    background-color: white;
	
	}

JavaScript

$("#nav li:has(ul)").children("ul").hide();
$("#nav li:has(ul)").find("div").click(function() {   
   var parent = $(this).parent()
   parent.siblings().find("ul.showSubnav").removeClass("showSubnav");
   parent.find("ul:first").toggleClass("showSubnav");
   parent.siblings().find("div.ordnerOffen").removeClass("ordnerOffen");
   parent.find("div:first").toggleClass("ordnerOffen");
 });