Question

我正在使用jqTransform插件来增强我的表单的外观和感觉。它运行良好。现在我在页面中添加了一个div，其中style =“display：none;”在页面中的一个事件（按钮单击）中，我试图显示div。但是看起来jQtrasform创建的div的宽度变为仅0 px。

我的HTML

<div id="divUserInfo" style="display:none;">
  <input type="text" id="txtName" />
</div>

在我的javascript中，我正在显示div

function ButtonClicked()
{
 $("#divUserInfo").fadeIn(100);
}

如果我更改display：none to display：block。它将与jQTrasnform一起使用。但是我想隐藏页面加载中的div并仅在调用ButtonClicked（）函数时显示。

经过一些谷歌搜索，我发现当隐藏div时，插件会将宽度设置为0到其元素。

有什么想法吗？

Answer 1

我有完全相同的问题，经过一些挖掘后能够解决如下问题：

而不是display: none;使用visibility:collapse;
设置要转换为自动width: auto !important;

Answer 2

您是否在CSS中明确定义了#divUserId？

#divUserId{ width:300px;display:none;}

Answer 3

我今天正在查看jqTransform的源代码，因为它似乎使得包含元素的宽度错误。它似乎也会查看输入字段的“size”属性。

所以你可以试试：

<div id="divUserInfo" style="display:none;">
  <input size="30" type="text" id="txtName" />
</div>

请注意，在插件的来源中，它将大小乘以10然后再添加10px，然后为safari做一些其他时髦的事情。你可能不得不纠结一下。

希望能为你做到：D

Answer 4

我有同样的问题，这就是我解决它的方法。

而是在CSS中使用display:none来隐藏我正在使用height:0;overflow:hidden的表单。

接下来，在我的js中，我使用的是animate而不是slideToggle我以前用来显示表单。在我看来，代码如下所示：

$(function() {
      $('#showAdvanced').toggle(function() {
        $('#sfBlock03').animate({
          height: 350
        });
      }, function() {
        $('#sfBlock03').animate({
          height: 0
        });
      });
    });

注意： #showAdvaced是显示高级选项的按钮的ID，#sfBlock03是包含高级表单的div的ID。

我希望这会有所帮助。

Answer 5

试试这个：

 <div id="divUserInfo" style="width:300px;display:none;">
     <input size="30" type="text" id="txtName" />
 </div>

或

 <div id="divUserInfo" style="display:none;">
    <input size="30" type="text" id="txtName" style="width:300px;" />
 </div>

Answer 6

在我的场景中，我正在搜索页面，其中在表单加载期间，有一个搜索框具有少量搜索参数，用户可以通过单击高级搜索按钮{{1包含高级搜索参数的隐藏div。我遇到的问题是，$.slideToggle()设置它变换的任何表单元素的高度和宽度，如果使用样式表属性隐藏它我jqTransform之前隐藏高级参数display:none的{{1}}将其设置为阻止，所以我做的是通过编写回调函数来设置转换元素的宽度和高度对于div

$.slideToggle()

Answer 7

我有同样的问题，我用'可见性'解决了。这是100％的作品......

$(".c-ekleyin").click(function(){
$(".sel-boxrow2").css("visibility" , "inherit");
$(".c-ekleson").show();
$(".c-ekleyin").hide();
});

<div class="sel-boxrow2" style="visibility:hidden;">
         <select name="select2" style="width:42px;">
             <option value="">---</option>
             <option value="opt1">1</option>
         </select>

jqTransform：使用display：none in style隐藏div时宽度消失。解决方案是什么？

7 个答案: