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 に答える