0

我正在开发一个表单，其中一些字段在点击时隐藏和显示。例如，我有一个名为“联合申请？”的输入字段。如果单击“是”，则会显示标题、名字、姓氏等字段。如果单击“否”，则隐藏字段。

从功能上讲，这在所有浏览器中都可以正常工作，但是在 IE8 中，当您单击“否”时，空白区域仍保留在隐藏联合申请人字段的下方，因此您必须向下滚动页面才能找到提交按钮。在 IE7、IE9、Chrome、FF 等中，空格按预期删除，提交按钮向后移动，但 IE8 似乎由于某种原因没有。

以下是仅使用标题作为示例以保持简短的 html：

<div class="form-row clearfix">
    <label for="jointApp"><span class="required">*</span>Joint application</label>
    <span class="form-icon"></span>
    <div class="form-fields validate-radio">
        <span class="radiolabel">Yes<input type="radio" id="jointApp" class="cdq-jointApp-check jointApp" name="jointApp" value="1" ></span>
        <span class="radiolabel">No<input type="radio" id="singleApp" class="cdq-jointApp-check jointApp" name="jointApp" value="0" ></span>
    </div>
          <span class="tooltip_container">
                    <a href="#" class="tooltip">
                        <img src="/assets/images/tooltip.jpg" alt="joint application information">
                            <span>
                                <img class="callout" src="/assets/images/callout.gif" alt="callout" />
                                Do you wish to add a second person to your application?
                            </span>
                    </a>
                </span>
    <br /><br />
</div>

<div class="clearfix"></div>

<div id="jointDetails" style="display:none;">

<p class="jointappheader jointDetails" style="display:none">Please enter the joint applicants details below</p>

<div class="jointDetails form-row clearfix" style="display:none">
    <label for="joint_title"><span class="required">*</span>Title</label>
    <span class="form-icon"></span>
    <div class="form-fields joint validate-select">
        <select name="joint_title" id="joint_title" class="cdq-joint-title-text validate-select field-select">
            <option selected="selected" value="">Please select...</option>
            <option value="Mr" >Mr</option>
            <option value="Mrs" >Mrs</option>
            <option value="Ms" >Ms</option>
            <option value="Miss" >Miss</option>
        </select>
    </div>
</div>
</div>

如果它对我有帮助，如下所示：

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>
<!-- CSS concatenated and minified-->
    <link rel="stylesheet" href="/assets/css/reset.css">
    <link rel="stylesheet" href="/assets/css/styles.css">
    <link rel="stylesheet" href="/assets/fancybox/source/jquery.fancybox.css?v=2.1.1" type="text/css" media="screen" />
    <!-- end CSS-->

    <script src="/assets/js/libs/modernizr-2.0.6.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="/assets/fancybox/source/jquery.fancybox.pack.js?v=2.1.1"></script>
    <script src="/assets/js/script.js" type="text/javascript"></script>
    <script src="/assets/js/slider.js" type="text/javascript"></script>
</head>

Javascript如下

$('#singleApp').click(function(){

    $('#jointDetails').hide('slow');
    $('.jointDetails').hide('slow');
})

$('#jointApp').click(function(){

    $('#jointDetails').show('slow');
    $('.jointDetails').show('slow');
})

如果您需要更多信息，请告诉我。

谢谢

4

1 回答 1

1

尝试元素的 .height() 。尝试将高度设置为 0。尝试 .remove()。希望这可以为您指明正确的方向；到实际的错误。

于 2012-10-13T09:08:48.790 回答