在这里http://dev.arphilvolis.fr/在 Lire la suite 上的 L'avis des professionals 部分单击我需要展开一个 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/
只要在你网站上的按钮处理事件之外的$(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(...);
});
修复:
不仅您的处理程序未在文档中准备好,您实际上还使用了两个单独的页面加载处理程序。合并它,你应该一切都准备好了:(请注意,为了简洁起见,我已经折叠了你的大函数/变量声明。)
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 包装在页面加载处理程序中。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句