如何切換隱藏的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"); 
});