Question

这应该很简单，但是当'trigger'是li中的一个锚点时，我无法使它工作。我想要锚点，当点击切换适当的嵌套ul。这是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>

我想这样做，所以我不必编写一个覆盖范围的功能，以使其更加全球化。这是我尝试过的，但我想到它不工作或将＃添加到网址

$(function() {
    $('.trigger').click(function() {
        $(this).attr('href').toggle(slow);
        return false;
    )};
});

非常感谢你的帮助。

Answer 1

这是一个尝试修复：

<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/

稍微修改后的版本，不依赖于ID而非位置：

$('.trigger').click(function() {
    $(this).siblings('ul').eq($(this).index()).toggle('slow');
    return false;
});

http://jsfiddle.net/kcq7K/3/

Answer 2

试试这个：

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的：

$(function() {
    $('.trigger').click(function() {
        var id = $(this).attr('href');
        $('#' + id).toggle('slow');
        return false;
    });
});

jQuery从父li中的链接切换嵌套的ul

2 个答案: