[英]jQuery toggle nested ul from a link in parent li
This should be simple, but I can't get it to work when the 'trigger' is an anchor inside the li. 这应该很简单,但是当“触发器”是li内部的锚点时,我无法使其正常工作。 I want the anchor, when clicked to toggle the appropriate nested ul.
我想要锚点,当单击以切换适当的嵌套ul时。 Here is the HTML:
这是HTML:
<ul id="specs">
<li>top level li</li>
<li>top level li</li>
<li>li to trigger nested list <a class="trigger" href="firstTrigger">first trigger</a> or <a class="trigger" href="secondTrigger">second trigger</a>.
<ul id="hiddenList1">
<li class="title">Title 1</li>
<li>something</li>
<li>something</li>
</ul>
<ul id="hiddenList2">
<li class="title">Title 2</li>
<li>something</li>
<li>something</li>
</ul>
</li>
</ul>
I would like to do it so I don't have to write a function for reach, to make it more global. 我想这样做,所以我不必编写覆盖范围的函数以使其更具全局性。 Here is what I've tried but I come up with it either not working or adding the # to the url
这是我尝试过的方法,但是我想不出来了,或者在网址中添加了#
$(function() {
$('.trigger').click(function() {
$(this).attr('href').toggle(slow);
return false;
)};
});
thank you very much for any help. 非常感谢您的帮助。
Here's an attempted fix: 这是尝试的修复:
<ul id="specs">
<li>top level li</li>
<li>top level li</li>
<li>li to trigger nested list <a class="trigger" href="firstTrigger">first trigger</a> or <a class="trigger" href="secondTrigger">second trigger</a>.
<ul id="firstTrigger">
<li class="title">Title 1</li>
<li>something</li>
<li>something</li>
</ul>
<ul id="secondTrigger">
<li class="title">Title 2</li>
<li>something</li>
<li>something</li>
</ul>
</li>
</ul>
$(function() {
$('.trigger').click(function() {
$("'#" + $(this).attr('href')).toggle('slow');
return false;
)};
});
http://jsfiddle.net/kcq7K/2/ http://jsfiddle.net/kcq7K/2/
Slightly modified version that doesn't rely on ids rather position: 略微修改的版本,不依赖于ID而是依赖于位置:
$('.trigger').click(function() {
$(this).siblings('ul').eq($(this).index()).toggle('slow');
return false;
});
Try this: 尝试这个:
HTML: HTML:
<ul id="specs">
<li>top level li</li>
<li>top level li</li>
<li>li to trigger nested list <a class="trigger" href="hiddenList1">first trigger</a> or <a class="trigger" href="hiddenList2">second trigger</a>.
<ul id="hiddenList1">
<li class="title">Title 1</li>
<li>something</li>
<li>something</li>
</ul>
<ul id="hiddenList2">
<li class="title">Title 2</li>
<li>something</li>
<li>something</li>
</ul>
</li>
</ul>
JavaScript: JavaScript:
$(function() {
$('.trigger').click(function() {
var id = $(this).attr('href');
$('#' + id).toggle('slow');
return false;
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.