Ajax load double content

Question

私はcmsとしてwordpressを使用して作成されたサイトを持っています。インデックスには長いアコーディアンスタイルの投稿タイトルリストがあり、この見出しをクリックすると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,'') 
      ; 
    } 

INDEX

  <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リクエスト内：成功、.htmlに変更.append下の2行目に

$.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; 
    }   
}); 

。

ラインは現在、次のようになります。

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

があった場合には、コンテンツをロードし、以前削除されます。

---

以前.exhibitionDocumentsを開け閉めするには、[編集]

：

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

あなたの成功コールバックの上に置き、それを。
      （右前var content = $(data).find(".single-document");）