向下滑动一次单击标签不会滑动

slide down once click on a tag does not slide

本文关键字：单击标签一次更新时间：2023-09-26

我有一堆动态创建的锚标签。我基本上想调用一个函数并使用 jquery slideDown 在该锚标记下显示该已执行函数的内容。每个带有id="id"的<a>标签和每个<a>标签都有一个<div id="slidedown">。

我正在使用jquery.slideto.min.js。

下面的代码甚至根本没有向下滑动。

$(function() {
    $.ajax({
        dataType: 'json'
        url: '/lists',
        success: function (data) {
            if (data != null) {
                var html = '<ul>';
                $.each(data.apis, function (i, item) {
                    html += '<li class="res">';
                    html += '<div class="hed"><h2><a id="id" href="/api/' + item + '.json">' + item + '</a></h2></div><div id="slidedown"></div>';
                    html += '</li>';
                });
                html += '</ul>';
                $('#exDiv').empty();
                $('#exDiv').append(html);
            }
        },
        error: function () {
            alert('Error');
        },
        contentType: 'application/json'
    });
   $(document).on('click','#id', function(e) {
       e.preventDefault();
       var link = this.href;
       $('#slidedown').slideto();
    });
});

单击任何<a>标签后，我在控制台上看到Uncaught TypeError: Cannot read property 'version' of undefined。

不确定这是否会解决问题，但$('slidedown')不是一个有效的选择器，应该$('#slidedown')，因为您div标识符slidedown：<div id="slidedown">。

您遇到的主要问题是您正在生成重复的id属性，这是无效的。将它们更改为类。然后，您可以在click()处理程序中遍历 DOM，以使用 next() 查找相关的 .slidedown 元素。试试这个：

$.ajax({
    dataType: 'json'
    url: '/lists',
    success: function (data) {
        if (data != null) {
            var html = '<ul>';
            $.each(data.apis, function (i, item) {
                html += '<li class="res">';
                html += '<div class="hed"><h2><a class="id" href="/api/' + item + '.json">' + item + '</a></h2></div><div class="slidedown"></div>';
                html += '</li>';
            });
            html += '</ul>';
            $('#exDiv').empty().append(html);
        }
    },
    error: function () {
        alert('Error');
    },
    contentType: 'application/json'
});
$(document).on('click','.id', function(e) {
   e.preventDefault();
   var link = this.href; // you can remove this if it's not used.
   $(this).next('.slidedown').slideto();
});