Question

我希望有人可以帮助我解决与将内容加载到jQuery手风琴onclick相关的问题。目前手风琴功能正在运行，内容由AJAX加载，问题是我只想在用户点击特定的手风琴叶时加载内容，而不是在页面加载时加载所有内容。

HTML：

<div class="accordionButton">Origin</div>
<div class="accordionContent">
    <a href="javascript:void(0)" class="close">Close</a>
    <div id="success_origin"></div>
    <div id="error_origin"></div>
    <script>
        $("#success_origin").load("content_origin.html", function(response, status, xhr) {
            if (status == "error_origin") {
                var msg = "Sorry but there was an error when loading the page's content: ";
                $("#error_origin").html(msg + xhr.status + " " + xhr.statusText);
            }
        });
    </script>
</div>

<div class="accordionButton">Style</div>
<div class="accordionContent">
    <a href="javascript:void(0)" class="close">Close</a>
    <div id="success_style"></div>
    <div id="error_style"></div>
    <script>
        $("#success_style").load("content_style.html", function(response, status, xhr) {
            if (status == "error_style") {
                var msg = "Sorry but there was an error when loading the page's content: ";
                $("#error_style").html(msg + xhr.status + " " + xhr.statusText);
            }
        });
    </script>
</div>

等等......

手风琴JavaScript：

$(document).ready(function() { 
    $('.close').click(function() {
        $('.close').addClass('hide');
        $('.accordionContent').slideUp('normal');
        $('.accordionButton').addClass('on');
        $('.accordionButton').removeClass('off');
        $('.showHeadline').slideDown('normal');     
    });

    $('.accordionButton').click(function() {
        $('.accordionButton').removeClass('on');
        $('.accordionButton').addClass('off');
        $('.showHeadline').slideUp('normal');
        $('.accordionContent').slideUp('normal');

        //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
        if($(this).next().is(':hidden') == true) {
            $('.close').addClass('show');
            $(this).addClass('on');
            $(this).next().slideDown('normal');
             } 
         });

    $('.accordionButton').mouseover(function() {
        $(this).addClass('over');

    }).mouseout(function() {
        $(this).removeClass('over');                                        
    });

    $('.accordionContent').hide();
});

我确信这很简单，但我非常感谢任何帮助。

谢谢， @rrfive

Answer 1

我不确定这是否是你要求的，但如果你想点击accordion按钮来加载content_origin.html那么你可以用jquery点击处理程序包装你的AJAX调用并给每个按钮例如

<script>
    $("#origin-button").click(function() {
         $("#success_origin").load("content_origin.html", function(response, status, xhr) {
              if (status == "error_origin") {
                  var msg = "Sorry but there was an error when loading the page's content: ";
                  $("#error_origin").html(msg + xhr.status + " " + xhr.statusText);
              }
          });
    });
</script>

Answer 2

您正在使用<script>标记内嵌数据 - 这将始终导致您的内容在页面看到这些标记后立即加载。您可能希望在click处理程序中加载内容，但这可能会导致动画出现问题。

此外，您应该仔细检查load回调。 AJAX请求返回的status永远不会等于error_origin或error_style。它应该是一个'字符串，分类请求的状态（“成功”，“未修改”，“错误”，“超时”，“中止”或“parsererror”））。 http://api.jquery.com/jQuery.ajax/

正在加载页面内容Onclick - AJAX

2 个答案: