Question

我有一个.slideToggle列表下拉列表，但遗憾的是它会使所有列表下拉列表，我只需要将其下拉到我点击的a下方的列表中。当然这是一个简单的问题，对于jquery来说还是一个新手。

Jsfiddle：http://jsfiddle.net/darcyvoutt/shErA/

Answer 1

以下内容找到下一个ul元素，并在其上运行slideToggle()。

$(document).ready(function () {
    $('.nav-filters-list-item a').click(function () {
        $(this).next('ul').slideToggle(70);
    });
});

请参阅this jsFiddle

Answer 2

尝试为每个下拉列表添加一个ID，如下所示：

<ul class="nav-filters-list">
    <li class="nav-filters-list-item" id="genre"><a href="#">Genre</a>

        <ul>
            <li><a href="#">Sub-Home</a>

            </li>
            <li><a href="#">Sub-Home</a>

            </li>
            <li><a href="#">Sub-Home</a>

            </li>
        </ul>
    </li>
    <li class="nav-filters-list-item" id="tags"><a href="#">Tags</a>

        <ul>
            <li><a href="#">Sub-Home</a>

            </li>
            <li><a href="#">Sub-Home</a>

            </li>
            <li><a href="#">Sub-Home</a>

            </li>
        </ul>
    </li>
    <li class="nav-filters-list-item"><a href="#">Date</a>

    </li>
    <li class="nav-filters-list-item"><a href="#">Order</a>

    </li>
</ul>

使用Javascript：

$(document).ready(function () {
    $('#genre a').click(function () {
        $('#genre ul').slideToggle(70);
    });
    $('#tags a').click(function () {
        $('#tags ul').slideToggle(70);
    });
});

JQuery - 特定于每个列表的.slideToggle

2 个答案: