jQueryを使用してdivを展開して折りたたむ

Question

ここでhttp://dev.arphilvolis.fr/ Lire avi des professionnels on Lire la suiteをクリックしてください。divを展開し、別のクリックでdivを折り畳む必要があります。

私のHTML構造：

<p style="text-align: left;">some content here</p> 
<p style="text-align: left;">some content here</p> 
<span class="collapslink">Lire la suite</span> 
<div class="collapscontent"> 
    <p style="text-align: left;">content</p> 
    <p style="text-align: left;">content</p> 
</div> 

私のjQueryコード：

jQuery(".collapslink").click(function() { 

    $collapslink = $(this); 

    //getting the next element 
    $collapscontent = $collapslink.next(); 

    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown. 
    $collapscontent.slideToggle(500, function() { 

     //execute this after slideToggle is done 
     //change text of header based on visibility of content div 
     $collapslink.text(function() { 
      //change text based on condition 
      return $collapscontent.is(":visible") ? "Fermer" : "Lire la suite"; 
     }); 

    }); 
}); 

JSFiddle http://jsfiddle.net/94150148/vfcau364/20/が動作しますが、私のウェブサイトにしないことです。http://dev.arphilvolis.fr/

Answer 1

あなたの中のボタンハンドライベントライブウェブサイトはの外にあります。$(document).ready()です。あなたのハンドラは、ページが読み込まれるのを待っていないので、添付しようとしている<span>はまだ存在しません。ハンドラはには添付されません。

あなたのハンドラが適切に装着されるため、それが問題を実証あなたのサイトからスニペット

---

jQuery(document).ready(function() { .... }); 内にする必要がある：

jQuery(document).ready(function(){ 
    new Slideshowck(...); 
}); 

var ampzSettings = {...}; 

//YOUR CODE HERE, OUTSIDE DOCUMENT READY HANDLER 
jQuery(".collapslink").click(function() { 

    $collapslink = $(this); 
    //getting the next element 
    $collapscontent = $collapslink.next(); 
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown. 
    $collapscontent.slideToggle(500, function() { 
     //execute this after slideToggle is done 
     //change text of header based on visibility of content div 
     $collapslink.text(function() { 
      //change text based on condition 
      return $collapscontent.is(":visible") ? "Fermer" : "Lire la suite"; 
     }); 
    }); 

}); 

jQuery(function(){ 
    jQuery(window).scroll(...); 
}); 

---

修正：

ハンドラーはドキュメント内に用意されているだけでなく、実際には2つの別々のページロードハンドラーを使用しています。それを統合して、あなたはすべて設定する必要があります。 （。私は簡潔にするために、あなたの大きな関数/変数宣言を崩壊したことに注意してください）

jQuery(document).ready(function() { 

    new Slideshowck(...);   //Reduced these declarations 
    jQuery(window).scroll(...); //to take up less space 
    var ampzSettings = {...};  //in the answer 

    //Moved inside the document ready handler 
    jQuery(".collapslink").click(function() { 

    $collapslink = $(this); 
    //getting the next element 
    $collapscontent = $collapslink.next(); 
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown. 
    $collapscontent.slideToggle(500, function() { 
     //execute this after slideToggle is done 
     //change text of header based on visibility of content div 
     $collapslink.text(function() { 
     //change text based on condition 
     return $collapscontent.is(":visible") ? "Fermer" : "Lire la suite"; 
     }); 
    }); 

    }); 

}); 

それはおそらく、理由はデフォルトでJSFiddleにJSFiddleラップを働きましたあなたのJavaScriptをページロードハンドラに入れてください。