0

我正在使用 jqTransform 插件来增强表单的外观和感觉。效果很好。现在我在页面中添加了一个 div，它的 style="display:none;" 并在页面中的一个事件（单击按钮）中，我试图显示 div。但看起来由 jQtrasform 创建的 div 的宽度只有 0 px。

我的 HTML

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

在我的 javascript 中，我通过

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

如果我将显示：无更改为显示：块。它将与 jQTrasnform 一起使用。但我想隐藏页面加载中的 div 并仅在调用 ButtonClicked() 函数时显示。

经过一番谷歌搜索，我知道当一个 div 被隐藏时，插件会将其元素的宽度设置为 0。

有什么想法吗 ？

4

7 回答 7

2

我遇到了完全相同的问题，经过一番挖掘后能够解决如下：

  1. 而不是display: none;使用visibility:collapse;
  2. 将要转换的元素的宽度设置为 autowidth: auto !important;
于 2012-05-24T09:11:58.377 回答
0

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

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

接下来，在我使用的 js 中，我animate之前slideToggle使用的是显示表单。在我的情况下，代码如下所示：

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

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

我希望这有帮助。

于 2011-12-23T16:19:33.923 回答
0

我有同样的问题，我用“可见性”解决了。这是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>

于 2013-03-06T07:46:10.430 回答
0

尝试这个：

 <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>
于 2012-03-12T07:18:27.270 回答
0

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

#divUserId{ width:300px;display:none;}
于 2010-10-22T20:25:32.533 回答
0

在我的场景中，我在一个搜索页面上工作，在表单加载期间，有一个搜索框具有少量搜索参数，用户可以通过单击高级搜索按钮来进行特定搜索，该按钮将$.slideToggle()包含一个包含高级搜索的隐藏 div参数。我面临的问题是，jqTransform设置它转换的任何表单元素的高度和宽度，如果它使用 display:none我用来隐藏高级参数的样式表属性隐藏，div然后$.slideToggle()将其设置为阻止，所以我所做的是我设置宽度和高度通过使用为$.slideToggle()

 $("#advancedSearchDIV").slideToggle("slow", function(){
    $("#advancedSearchDIV div.jqTransformSelectWrapper ul").each(
        function() {
        $(this).width(246);
        var height = 24;
        if($(this).children().length >= 6){
            height = 5 * height;
        } else {
            height = ($(this).children().length - 1) * height;
        }
    $("#advancedSearchDIV div.jqTransformSelectWrapper ul").height(height);
    $("#advancedSearchDIV div.jqTransformSelectWrapper ul").css("overflow","auto");
    });
});
于 2012-08-07T14:06:19.953 回答
0

我今天正在查看 jqTransform 的源代码，因为它似乎将包含元素的宽度弄错了。它似乎还查看了输入字段的“大小”属性。

所以你可以尝试：

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

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

希望对你有用：D

于 2010-11-08T03:27:06.907 回答