javascript - AJAX 调用需要双击

Question

我创建了一个加载内容并写入 html 的函数。出于某种原因，该功能在单击两次而不是一次后显示。知道如何制作它，只需单击一下即可加载和显示信息？

function getFuncDoc(funcName, targetDivId) {
    var webServiceCall = funcName;
    $.ajax({
        type: "get",
        url: webServiceCall,

        success: function(doc) {
           $('#' + targetDivId).load(doc, function(){
            $('#' + targetDivId).toggle(                                   
                    function() {

                        $('#' + targetDivId).css('padding', '10px');
                        $('#' + targetDivId).html(doc);
                    });
           });
        },
        error: function(request, status, error) {
            return 'Error';
        }
    });
}

Answer 1

检查目标元素 ( targetDivId)在触发display:none 之前是否有。toggle()

如果不是这种情况，那么您需要将此属性添加到 CSS 中的元素。

toggle()-使用display:blockordisplay:inline或display:inline-block 的元素将隐藏该元素并将其属性设置为display:none，因此您需要触发它两次才能显示内容。

这是一个现场演示。