javascript - jQuery 切换功能使文本变形

Question

如果我单击“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>

Answer 1

首先，font 是怎么回事？和id标签？不确定 jQuery 在切换它一无所知的标签时会做什么( id )。

更重要的是，这些id标签设置为 display:inline-block切换后，如:

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

该元素与 <id id="bottomtext2" /> 相邻，也设置为inline-block 。这可以解释并排显示。

坏了的 fiddle :http://jsfiddle.net/T8aWV/1/
固定 fiddle :http://jsfiddle.net/T8aWV/

摆脱id标签并使其成为 divs 。这解决了我的问题。

另请参阅:"Periodic Table" of HTML 5 tags (and when to use them)