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> 

UPDATE 下面的作品。我認爲問題出在聊天腳本本身。它似乎即使在它的內部它有自己的頭腦。

<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

我使用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> 

Answer 2

你可能要設置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 3

（ $(thislive).delay(30000).show();）的代碼，在30秒後

改變現有的顯示器

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

它將工作

Answer 4

你需要做的：$(thislive).delay(30000).show(0);

根據文檔的.delay()

delay()可以用標準的效果隊列或定製隊列中。這不會延遲不使用效果隊列的.show()或.hide()的無參數表單。

當提供持續時間時，.show()成爲動畫方法。

這裏有一個fiddle

Answer 5

嘗試使用代碼：

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