代码之家 › 专栏 › 技术社区 › shin

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

jquery

shin · 技术社区 · 15 年前

下面是用php动态创建的代码。

我想做的是当我用dec76的href单击class='toggle'时,我想用id desc76显示ul。

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

类,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
...

1 回复 | 直到 8 年前

Sarfraz 15 年前

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

1 年前

user28928120 · 如何在jquery中选择所有类?

1 年前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

1 年前

Eliable · 使点击计数器和进度条协同工作

1 年前

mlri · 从不同的onclick事件执行相同的javascript函数

1 年前

Cymro · 如何将jquery$(this)与$(document).keyup一起使用

1 年前

Jack Maessen · 在处理程序上使用时如何获取输入类型

1 年前

BlueDogRanch · 使用jQuery Datepicker和dateFormat、altFormat和altField以及$(this)

1 年前

Jameel · Jquery:未捕获SyntaxError:在参数列表后的“Node”上执行“appendChild”失败:缺失)

1 年前