0

別のyes/no入力をクリックしたときに表示または非表示にする必要のある要素があるフォームを作成しています。スタイリングの助けが必要です。

このJSフィドルを参照してください：http：//jsfiddle.net/TdnZp/11/

すべてが技術的に私が望むように機能します。[はい/いいえ]をクリックすると、別のフォーム要素が表示または非表示になり、要素が占めていたスペースが消えることに注意してください。これは良いことですが、入力ボックスとラベルを、現在のようにずらさずに、上下に適切な列に配置する必要もあります。

また、新しい要素が入ってくると、その下のすべての要素が瞬時にジャンプするのではなく、スムーズに下にスライドしてスペースを空けるようにします。同じように、要素が消えたときは、下の要素がスムーズに上にスライドして埋めます。

誰かがこれらの2つのことを行う方法を知っていますか？それ以外に別のHTML要素を使用する必要がある場合は<ul>、お知らせください。

ありがとう！

4

2 に答える 2

3

必要な間隔は、ラベルの幅を設定することで実現できます。必要なスライド効果は、fadeInの代わりにslideDownを使用して実現できます。

于 2012-04-13T20:12:43.317 に答える
2

.slideUp新しいフォームをスライドインさせる場合は、.slideDownアニメーションを使用する必要があります。

デモ

下記参照、

$('[name="label"]').change(function(){
    if ($('[name="label"]:checked').val() == "yes"){
        $('#bl').slideDown('slow');
    }else{
        $('#bl').slideUp('slow');
    }
});

編集：配置とスタイル設定のためにマークアップとCSSを変更する必要があります。以下のコードを参照して、必要に応じて変更してください。

デモ

CSS：

#list li { padding: 2px; }
#list input { margin: 1px; }
div.form-label { display: inline-block; width: 100px; font-weight: bold;}

HTML：

<form>
    <ul id="list">
        <li>
            <div class="form-label">
                <label for="label">Label:</label>
            </div>
            <input type="radio" name="label" value="yes" />Yes
            <input type="radio" name="label" value="no" />No
        </li>
        <li id="bl">
            <div class="form-label">
                <label for="label_cost">Cost:</label>
            </div>
            <input name="label_cost" />
        </li>
        <li>
            <div class="form-label">
                <label for="another_one">Another One:</label>
            </div>
            <input name="another_one" />
        </li>
    </ul>
</form>
于 2012-04-13T20:13:09.803 に答える