Question

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

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

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

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

类，secondul有CSS显示：隐藏;。

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

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

HTML：

<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");
});

如何通过单击带有jquery的链接来切换隐藏的ul

1 个答案: