jQuery展开标签无法正常工作

Question

我一直在尝试使锚标记上的展开折叠功能起作用，但不知何故我遗漏了一些东西。我在这里浏览了几乎所有链接，但没有找到我的代码和帮助选项之间的区别。

我想要的只是单击任何行的“+”号进行简单的扩展。我正在我的 javascript 文件中动态构建 div。不知何故，我只能展开所有备用行。所以如果我的回复有 5 个元素，我只能每隔一行展开一次！有人可以告诉我有什么问题吗？

谢谢，

真由理

function DisplayResultsGrid(obj) {
    $.each(obj, function(index, item) {
        $("#divRequestDetails").append('<div class="requestDetailItem"><a href="#" class="lnkRequest"> + </a><div class="toggleDays">This is the text to expand</div></div>').append('<div class="rowSeparator"></div');
        $('.toggleDays').hide();
        $('.lnkRequest').click(function() {
            $(this).next('.toggleDays').toggle();
        });
    });
}

Answer 1

每次循环时，您都在向所有 .lnkRequest 元素添加点击。您没有将事件添加到当前事件。所以第一个会有第一次点击事件，加上下一个，再加上第三个，等等。

您需要在每个循环之外分配事件或使用事件委托。

function DisplayResultsGrid(obj) {
    $.each(obj, function(index, item) {
        $("#divRequestDetails").append('<div class="requestDetailItem"><a href="#" class="lnkRequest"> + </a><div class="toggleDays">This is the text to expand</div></div>').append('<div class="rowSeparator"></div');
    });
    $('.toggleDays').hide();
    $('.lnkRequest').click(function() {
        $(this).next('.toggleDays').toggle();
    });
}