使用jQuery展开和折叠div

在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>

---

JSFIDLE正在工作，但在我的网站上没有：

您的实时网站中的按钮处理程序事件在

$（document.ready（）

之外。因为处理程序没有等待页面加载，所以您试图将其附加到的

还不存在。处理程序不附加任何内容

要正确附加处理程序，它需要位于

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


修复方法：

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

不仅文档中的处理程序没有准备就绪，实际上还使用了两个单独的页面加载处理程序。将其合并，您应该已设置好：
（请注意，为了简洁起见，我折叠了您的大函数/变量声明。）

它可能在JSFIDLE上起作用，因为默认情况下，JSFIDLE将JavaScript包装在页面加载处理程序中。
网站上的文本“L'avis des professionnels”不是可单击的链接。@Utkanos是的，这是正常的。尝试删除所有js插件，只添加主插件。另外，在您的click函数jQuery（“.collapslink”）.click（function（）{添加一个控制台日志，当我使用事件侦听器断点时，它似乎没有进入该函数
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";
      });
    });

  });

});