[英]Jquery will not hide/show div
I'm trying to hide a Live Chat box on page load and then when a hyperlink is clicked, display the Chat box after 30 seconds. 我试图在页面加载时隐藏“实时聊天”框,然后单击超链接时,在30秒后显示“聊天”框。
Anybody have any ideas what I'm doing wrong? 有人知道我在做什么错吗?
Jquery jQuery的
<script type="text/javascript">
jQuery(document).ready(function ($) {
var thislive = document.getElementById('liveChat');
$(thislive).hide();
$("#chatBox").click(function () {
var thislive = document.getElementById('liveChat');
$(thislive).delay(30000).show(); // Display after 30 seconds
});
});
</script>
<div id="liveChat">
<!-- Start of LiveChat (www.livechatinc.com) code -->
<script type="text/javascript">
window.__lc = window.__lc || {};
window.__lc.license = 111111;
(function () {
var lc = document.createElement('script'); lc.type = 'text/javascript'; lc.async = true;
lc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.livechatinc.com/tracking.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(lc, s);
})();
</script>
<!-- End of LiveChat code -->
</div>
cshtml cshtml
<div class="col-sm-3 col-md-3">
<a id="chatBox" href="#panel-column-3" class="panel-column row-collapse-toggle collapsed" data-toggle="collapse" aria-expanded="false" aria-controls="bpanel-column-3">
<i class="fa fa-question-circle"></i>
<h3>@Umbraco.Field("contactustab3title")</h3>
</a>
<div class="row-collapse collapse" id="panel-column-3">
<div class="inner">
@Umbraco.Field("contactustab3content")
</div>
</div>
</div>
UPDATE The below works. 更新以下工作。 I think the problem is with the chat script itself.
我认为问题出在聊天脚本本身。 It seems even when its inside the div it has a mind of its own.
看起来,即使它在div中也有自己的想法。
<script type="text/javascript">
jQuery(document).ready(function ($) {
var thislive = document.getElementById('liveChat');
$(thislive).hide();
$("#chatBox").click(function () {
var thislive = document.getElementById('liveChat');
$(thislive).delay(5000).show(0); //5 seconds
});
});
</script>
<div id="liveChat">
<div>
test
</div>
</div>
You probably want to set timeout
here and not delay
. 您可能想在此处设置
timeout
而不是delay
。 Like this, 像这样,
setTimeout(function(){ $(thislive).show(); }, 30000);
so replace 所以更换
$(thislive).delay(30000).show();
Final Code 最终密码
<script type="text/javascript">
jQuery(document).ready(function ($) {
var thislive = document.getElementById('liveChat');
$(thislive).hide();
$("#chatBox").click(function () {
var thislive = document.getElementById('liveChat');
setTimeout(function(){ $(thislive).show(); }, 30000); // Display after 30 seconds
});
});
</script>
Change your existing display after 30 seconds ( $(thislive).delay(30000).show();
) Code to 30秒后更改现有显示(
$(thislive).delay(30000).show();
)代码为
$(thislive).delay(30000).show(0);
It will work 会工作的
You need to do: $(thislive).delay(30000).show(0);
您需要执行以下操作:
$(thislive).delay(30000).show(0);
According to the documentation for .delay()
根据
.delay()
的文档
delay()
can be used with the standard effects queue or with a custom queue.delay()
可以与标准效果队列或自定义队列一起使用。 This will not delay the no-arguments forms of.show()
or.hide()
which do not use the effects queue.这不会耽误的无参数形式
.show()
或.hide()
不使用效果队列。
When a duration is provided, .show()
becomes an animation method. 提供持续时间后,
.show()
会成为动画方法。
try using that code: 尝试使用该代码:
$(document).ready(function($){
$('#liveChat').hide();
$('#chatBox').click(function(){
$('#liveChat').delay(30000).fadeIn();
});
});
I resolved the issue by using the setTimeout() method. 我通过使用setTimeout()方法解决了该问题。 My chatBox hyperlink now has an onclick call to a new method called loadChat().
我的chatBox超链接现在具有对名为loadChat()的新方法的onclick调用。 This then calls another method called showChat which then in turn loads the chat box script.
然后,这将调用另一个名为showChat的方法,该方法随后将加载聊天框脚本。
<script type="text/javascript">
function loadChat() {
setTimeout(showChat, 5000) // load the chat icon after 5 seconds
}
function showChat() {
window.__lc = window.__lc || {};
window.__lc.license = 1111111;
(function () {
var lc = document.createElement('script'); lc.type = 'text/javascript'; lc.async = true;
lc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.livechatinc.com/tracking.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(lc, s);
})();
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.