0

' rejt 'ボタンをクリックすると、HTMLの2つの部分を切り替える機能がいくつかあります。通常は次のようになります。 普通

しかし、ボタンを使用して再び元に戻すと、次のように変形します。 ゆがんだ

これを修正するのを手伝ってください。

コードサンプル：

function bottom() {
    var value = $('#toggle').attr('value');
    $('#bottomtext1').toggle('slow');
    $('#bottomtext2').toggle('slow');
    
    if (value == 'rejt'){
        $('toggle').attr('value', 'mutat');
    }
    else if (value == 'mutat') {
        $('toggle').attr('value', 'rejt');
    }
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<id id="bottomtext1" style="display:none;">stuff1</id>

<input type="button" value="rejt" id="toggle" onclick="bottom();">

<id id="bottomtext2" style="display:none;">stuff2</id>

4

1 に答える 1

3

まず、fontandidタグとは何ですか？（）について何も知らないタグ​​を切り替えるときにjQueryが何をするのかわからないid。

さらに重要なことに、これらのidタグは、次display:inline-blockのようにトグルの後に設定されます。

<id id="bottomtext2" style="display:inline-block" />

その要素はに隣接して<id id="bottomtext2" />おり、これもに設定されていinline-blockます。これは、並べて表示することを説明します。

壊れたフィドル：http：//jsfiddle.net/T8aWV/1/
固定フィドル：http：//jsfiddle.net/T8aWV/

idタグを取り除き、それらを作成しますdivs。これで問題は解決しました。

参照：HTML 5タグの「周期表」（およびそれらをいつ使用するか）

于 2012-09-07T15:09:55.113 に答える