1

私の問題を理解するには、このリンクにアクセスしてください。ここでは、テキストボックスとボタンが互いに整列していることに注意してください。ただし、SlideUp ボタンをクリックしてから SlideDown ボタンをクリックすると、整列が乱れます

これが私のコードです

$(document).ready(function(){
  $("#btSlideDown").click(function(){
    $("#txt").slideDown("slow");
    $("#b2").slideDown("slow");
  });
  $("#btSlideUp").click(function(){
    $("#txt").slideUp("slow");
    $("#b2").slideUp("slow");
  });
});

なぜこれが起こっているのか説明してください。

4

2 に答える 2

1

CSS に垂直方向の配置スタイルを追加すると、次のように問題が解決するようです。

#panel > input{
    vertical-align: middle;
}

デモ- 垂直方向の配置を適用する

私の推測では、ブラウザはアライメント自体を可能な限りうまく処理しようとしており、入力が個別の要素であるため、正しく取得することはできません。

a を指定することvertical-alignで、ブラウザが推測する必要がなくなります。私はコースを推測しているだけです。

于 2013-03-23T23:36:09.437 に答える
0

その問題の原因をまだ特定していませんが、別の解決策があります。

これらの要素をaでラップし、またはラッパーdivで呼び出してみてください。slideDownslideUp

<div id="panel">
    <div id='wrapper'>
        <input id="txt" type="text" />
        <input id="b2" type="button" value="OK"/>
    </div>
</div>

$(document).ready(function(){
    $("#btSlideDown").click(function(){
        $("#wrapper").slideDown('slow');
    });
    $("#btSlideUp").click(function(){
        $("#wrapper").slideUp('slow');
    });
});

フィドル

于 2013-03-23T23:17:20.323 に答える