显示隐藏的 div 时 Signature_pad 不起作用答案

【问题标题】：Signature_pad doesn't work when hidden div is shown显示隐藏的 div 时 Signature_pad 不起作用
【发布时间】：2016-05-24 23:06:07
【问题描述】：

我正在尝试实现这个signaturePad https://github.com/szimek/signature_pad，当我尝试在单个页面中它工作正常，但是当我尝试放入一个在开始时隐藏的div时出现问题，然后是pad不起作用。我认为是调整大小的画布问题，但我不知道如何解决。

这是我的代码：

<div class="col-sm-9 col-md-10 message-list">
  This is the first div, which I hidde when click on a row
</div>
<div class="col-sm-9 col-md-10 view-message" style="display:none" >
 <div id="signature-pad" class="m-signature-pad">
    <div class="m-signature-pad--body">
       <canvas></canvas>
    </div>
    <div class="m-signature-pad--footer">
       <div class="description">Sign above</div>
          <button type="button" class="button clear sign_btn" data-action="clear">Clear</button>
          <button type="button" class="button save sign_btn" data-action="save">Save</button>
    </div>
</div>

这是js部分：

$(document).ready(function() {
$(".list-group-item").each(function() {
    $(this).click(function() {
            $(".message-list").fadeOut('slow').css('display','none');
            $(".view-message").fadeIn('slow').css('display','block');
    });
});

我加载了所有需要的 js 和 css，它在主视图中工作，但当我通过一个按钮并将 div 更改为阻止时却没有。我试图阅读文档，但不是很清楚。

【问题讨论】：

标签： javascript html type-signature

【解决方案1】：

CSS 操作对我不起作用。在用户准备好签名之前，我没有渲染签名板，而不是使用 CSS。 IE。用监听某个事件的条件包装签名板组件。

【讨论】：

【解决方案2】：

您可以尝试将可见性设置为隐藏而不是 display:none 吗？

$(".list-group-item").each(function() {
    $(this).click(function() {
            $(".message-list").fadeOut('slow').css('visibility','hidden');
            $(".view-message").fadeIn('slow').css('visibility','visible');
    });
});

【讨论】：

【解决方案3】：

使用：height: 0; overflow: hidden; 而不是：display:none

它对我有用。

【讨论】：