Ajax 加载双倍内容

Question

我有一个使用 wordpress 作为 cms 构建的网站，并且索引有一个很长的手风琴风格的帖子标题列表，一旦您单击此标题，该帖子的内容就会通过 ajax 加载到索引页面中。

我的问题是，当再次单击标题时，它会再次加载帖子内容，如果您单击不同的标题，它不会关闭并删除已单击的前一个标题。

我是使用 ajax 的新手，不确定如何解决这个问题。有没有办法在第二次单击标题以关闭手风琴或单击另一个标题以展开和打开时删除内容。直播网站在这里：http://www.minervasydney.com/

下面是我的 ajax 代码和我的索引文件中列出标题的部分。如果有人有想法，将不胜感激。谢谢！

AJAX

        $("a.exhibitionInformation").on("click", function(event) {

        var exhibitionContainer = $(this).parent(".exhibition");
        var url = $(this).attr("href");
        var doc = $(this).next(".exhibitionDocuments");
        var title = convertToSlug($(this).text().split("\n")[1]);
        var slug = $(this).attr("data-slug");
        $(this).toggleClass("selected");

        if($(doc).is(':not(:hidden)')) {
            $(doc).slideToggle();
        } else {            


            $.ajax({
                url: url,
                type: "GET",
                success: function(data) {
                    var content = $(data).find(".single-document");                 
                    $(doc).append(content).slideToggle(300);                    
                    $("html, body").animate({ scrollTop: exhibitionContainer.offset().top - 26 });
                    window.location.hash = slug;
                }           
            });

        }

        event.preventDefault();
    });


    //ajaxstarStop Loading
    $( document ).ajaxStart(function() {
        $( "#loading" ).fadeIn(100);
    });

    $( document ).ajaxStop(function() {
        $( "#loading" ).fadeOut();
    });     


    function convertToSlug(Text)
    {
        return Text
            .toLowerCase()
            .replace(/ /g,'-')
            .replace(/[^\w-]+/g,'')
            ;
    }

索引

            <section class="exhibition">

            <a class="exhibitionInformation" href="<?php the_permalink(); ?>" data-slug="<?php echo $post->post_name; ?>">
                <span class="dates"><?php echo types_render_field("dates", array("argument1"=>"value1")); ?></span>
                <span class="opening"><?php echo types_render_field("opening", array("argument1"=>"value1")); ?></span>
                <span class="title">&#8220;<?php the_title(); ?>&#8221;</span>
                <span class="artist"><?php echo types_render_field("artist", array("argument1"=>"value1")); ?></span>
                <span class="extra"><?php echo types_render_field("extra", array("argument1"=>"value1")); ?></span>
            </a>


            <article class="exhibitionDocuments">

            </article>

        </section>

Answer 1

在您的 ajax 请求中：

$.ajax({
    url: url,
    type: "GET",
    success: function(data) {
        var content = $(data).find(".single-document");                 
        $(doc).append(content).slideToggle(300);                    
        $("html, body").animate({ scrollTop: exhibitionContainer.offset().top - 26 });
        window.location.hash = slug;
    }           
});

在success下的第二行，将.append更改为.html。

该行现在应该是：

$(doc).html(content).slideToggle(300);

它将加载内容并删除以前的内容（如果有）。

---

编辑

关闭之前打开的.exhibitionDocuments：

$(document).find(".exhibitionDocuments").hide();

将它放在您的成功回调之上。
（就在var content = $(data).find(".single-document"); 之前）