proggen.org

Verfasst: **Di Mär 22, 2011 8:46 am**

Hallo liebe Freunde des gepflegten Javascripts. Ich habe eine Frage zu dem Überschriftenthema.
Ich möchte einer Liste eine Eigenschaft mitgeben, die nichts Anderes macht, als zu überprüfen, ob ein Listeneintrag Untermenüs hat, und wenn er welche hat, dann soll das Listenelement auf die Größe der Untermenüs erweitert werden.
Heißt die height-Eigenschaft soll die Größe der <ul> innerhalb des <li> - Tags übernehmen. Ich scheitere an JQuery...
Hier mein Kot:

Code: Alles auswählen

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>	
<style>
	ul 
	{
		margin: 0;
		padding: 0;
		list-style: none;
		width: 150px;
		border-bottom: 1px solid #ccc;
	}
	li
	{
		height:30px;
	}
	ul li 
	{
		position: relative;
	}
	
	li ul 
	{
		position: absolute;
		left: 149px;
		top: 0;
		display: none;
	}
	
	ul li a 
	{
		display: block;
		text-decoration: none;
		color: #777;
		background: #fff;
		padding: 5px;
		border: 1px solid #ccc;
		border-bottom: 0;
	}
	li:hover ul 
	{	
		display: block; 
	}
	
</style>
<script type="text/javascript">
$(function()
{

	$("#menu li").hover(function()
	{
		var len = $(this).children(".test").$("li").size();
		var ulHeight = 30*len;
		alert(len);
		//alert(ulHeight);
		$(this).children(".submenu").stop().animate({"height": ulHeight}, "fast");
		
	},function()
	{
		$(this).children(".submenu").stop().animate({"height": "30"}, "fast");
	})
	
});
</script>
</head>
<body>

<ul id="menu"> 
    <li><a href="#">Home</a></li> 
    <li id="submenu"><a href="#">About</a> 
      <ul ="test"> 
        <li><a href="#">History</a></li> 
        <li><a href="#">Team</a></li> 
        <li><a href="#">Offices</a></li> 
      </ul> 
    </li> 
    <li id="submenu"><a href="#">Services</a> 
      <ul id="test"> 
        <li><a href="#">Web Design</a></li> 
        <li><a href="#">Internet 
            Marketing</a></li> 
        <li><a href="#">Hosting</a></li> 
        <li><a href="#">Domain Names</a></li> 
        <li><a href="#">Broadband</a></li> 
      </ul> 
    </li>
    <li id="submenu"><a href="#">Contact Us</a> 
      <ul id="test"> 
        <li><a href="#">United Kingdom</a></li> 
        <li><a href="#">France</a></li> 
        <li><a href="#">USA</a></li> 
        <li><a href="#">Australia</a></li> 
      </ul> 
    </li> 
  </ul>
  </body>
  </html>

Grüße,

Sukka

Verfasst: **Di Mär 22, 2011 9:39 am**

Mal ein paar Anregungen:

Code: Alles auswählen

var len = $(this).children(".test").$("li").size();

Das kann so nicht funktionieren, es wundert mich sogar das der Interpreter da nicht meckert, besser:

Code: Alles auswählen

var len = $(this).find(".test li").length;

Zudem versuchst du an vielen Stellen über den Class Selector (.test) ein Element anzusprechen, obwohl du im HTML-Teil IDs verwendet hast (#test wäre da der entsprechende Selector), an einer Stelle hast du sogar das Attribut komplett vergessen – keine gute Basis zum debuggen deines Scripts.

Verfasst: **Mi Mär 23, 2011 11:03 pm**

Sooo,

vielen Dank für die 2 Tipps, beide führten zu einer sehr guten Lösung:

Code: Alles auswählen

<script type="text/javascript">
$(function()
{
	$("#menu li").hover(function()
	{
		var len = $(this).find("#test li").length;
		var ulHeight = 30*len;
		//alert(len);
		//alert(ulHeight);
		if(len != 0)
		{
			$(this).stop().animate({"height": ulHeight}, "fast");
		}
	},function()
	{	
		$(this).stop().animate({"height": "30"}, "fast");
	})
});
</script>

Dieser Code tut jetzt exakt das, was er soll und wann er es soll.

proggen.org

JQuery stop().animate()

JQuery stop().animate()

Re: JQuery stop().animate()

Re: JQuery stop().animate()