Question

我想透露带有JQuery toggle（）或slideToggle（）的嵌入式Google日历，但只显示空白

HTML

<span class="btn btn-purple btn-lg" id="showcalendar">View Calendar</span>

<div class="section section-calendar" id="calendarhide" style="display:none;">
<div class="container container-calendar">
<iframe src="https://calendar.google.com/calendar/embed?src=EMAILHIDDEN%40gmail.com&ctz=Europe/Monaco" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
</div><!--container-->
</div><!--section-->

JQuery的

$('#showcalendar').click(function(){
$('#calendarhide').slideToggle();
});

如果我插入一个单词＆＃34; test＆＃34;而不是iframe，这个词显示没有任何问题，即它必须是谷歌日历的问题？

Answer 1

您可以参考此thread，其中指出Google协作平台创建切换（显示/隐藏）按钮或div的最佳方法是使用jQuery编码到html框中。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script>

<button id='button'>NAME YOUR BUTTON</button>

<div id='text' style='display:none;'>
    <ul>
        <li>list 1</li>
        <li>list 2</li>
    </ul>
</div>

<script>

    $('#button').click(function(){
      if ($(this).text() === 'Read More') {
        $(this).text('Read Less');
        $('#text').toggle("fast");
      }
      else {
        $(this).text('Read More');
        $('#text').toggle("fast");
      }
    });

</script>

嵌入式Google日历未显示在JQuery切换或slideToggle上

1 个答案: