如何切换隐藏的UL通过点击链接与jQuery

Question

我有以下代码动态创建的PHP。

我想要做的是当我用desc76的href点击class ='toggle'时，我想用id desc76显示ul。

我也想将arrowdown16.png更改为arrowup16.png。

然后当我点击它时，ul会淡出或再次隐藏。

class，secondul has CSS display：hidden ;.

我试过这个，但它不起作用。

$(".toggle").click(function() { 
    event.preventDefault(); 
    var id = "#"+$(this).attr('href') 
    $("id").show("slow"); 
    }); 

在此先感谢您的帮助。

<ul> 
... 
... 
<li class='toggledetail'> 
Show Details 
<div> 
<a href='desc76' class='toggle' > 
<img src="http://blablabla.com/assets/icons/arrowdown16.png" alt="arrowdown16" title="Show Details" /></a> 
</div> 
</li> 
</ul> 

<ul class='secondul' id='desc76'> 
<li class='listdetail'>Spec Details<div>0</div> 
</li> 
</ul> 
<li class='toggledetail'> 
Show Details<div> 
<a href='desc75' class='toggle' > 
<img src="blablabla.com/assets/icons/arrowdown16.png" alt="arrowdown16" title="Show Details" /></a> 
</div> 
</li> 
</ul> 
<ul class='secondul' id='desc75'> 
<li class='listdetail'>Spec Details<div>0</div> 
</li> 
</ul> 

... Here comes more ul 
... 

Answer 1

更新了图片：如果你想显示/隐藏与点击的元素相同的元素

$(".toggle").live('click', function() { 
    event.preventDefault(); 
    var id = "#"+$(this).attr('href'); 
    // change image of the next element 
    $(this).next('img').attr('src', 'path here'); 
    $("id").show("slow"); 
}); 

注意，你需要使用slideToggle而不是show。或者您可以使用animate方法和opacity:'toggle'来填充切换效果。

您需要使用动态生成的元素live()方法：

$(".toggle").live('click', function() { 
    event.preventDefault(); 
    var id = "#"+$(this).attr('href'); 
    $("id").show("slow"); 
});