使用jQuery扩展和崩溃

Question

在此处http://dev.arphilvolis.fr/在lire la suite上的L'Avis des Professionnels in Lire la Suite上点击我需要扩展DIV，另一点点击collaps Div。P>

我的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

您的实时网站中的按钮处理程序事件是 exourt $(document).ready()。由于您的处理程序不在等待页面加载，因此您要将其附加到的<span>尚不存在。处理程序已连接到 Nothing 。

要使您的处理程序正确连接，需要在内部 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(...);          //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包裹在页面载荷处理程序中。