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

首先，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 标记的“周期表”（以及何时使用它们）