jQuery將不會隱藏/顯示div

Question

我試圖在頁面加載時隱藏“實時聊天”框，然后單擊超鏈接時，在30秒后顯示“聊天”框。

有人知道我在做什么錯嗎？

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

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

更新以下工作。 我認為問題出在聊天腳本本身。 看起來，即使它在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>

Answer 1

您可能想在此處設置timeout而不是delay 。 像這樣，

 setTimeout(function(){ $(thislive).show(); }, 30000);

所以更換

$(thislive).delay(30000).show();

最終密碼

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

Answer 2

30秒后更改現有顯示（ $(thislive).delay(30000).show(); ）代碼為

$(thislive).delay(30000).show(0);

會工作的

Answer 3

您需要執行以下操作： $(thislive).delay(30000).show(0);

根據.delay()的文檔

delay()可以與標准效果隊列或自定義隊列一起使用。 這不會耽誤的無參數形式.show()或.hide()不使用效果隊列。

提供持續時間后， .show()會成為動畫方法。

這是一個小提琴

Answer 4

嘗試使用該代碼：

    $(document).ready(function($){
$('#liveChat').hide();
$('#chatBox').click(function(){
$('#liveChat').delay(30000).fadeIn();
});
});

Answer 5

我通過使用setTimeout（）方法解決了該問題。 我的chatBox超鏈接現在具有對名為loadChat（）的新方法的onclick調用。 然后，這將調用另一個名為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>