javascript - jquery - .hide() .show() 破坏 CSS 样式

Question

我有一个包含一组默认显示的文本框和按钮的 div。我还有一组使用 jquery 制作的锦标赛括号，设置为display: none.

$('#buttontest').click(function() {
    $('div.bracket').show();
    $('div.teamList').hide();
});

当我使用此代码时，它可以根据显示的内容进行交换，但是当它显示锦标赛括号时，它会破坏其背后的 css 样式，锦标赛树上的球队不匹配。我在底部链接了 2 个屏幕截图以突出显示这一点。

这是锦标赛树的样子

但是当我隐藏括号并在单击按钮后显示它们时，它会像这样结束

这是我在 JADE 模板 HTML 语言中的 HTML 方面的代码，但很容易看到发生了什么:)

div.teamList
    form.pull-left(method="post", id="loginForm")
        input.input-small(id="team1", type="text", name="Team 1", placeholder="Team 1")
        input.input-small(id="team2", type="text", name="Team 2", placeholder="Team 2")
        br
        input.input-small(id="team3", type="text", name="Team 3", placeholder="Team 3")
        input.input-small(id="team4", type="text", name="Team 4", placeholder="Team 4")
        br
        input.input-small(id="team5", type="text", name="Team 5", placeholder="Team 5")
        input.input-small(id="team6", type="text", name="Team 6", placeholder="Team 6")
        br
        input.input-small(id="team7", type="text", name="Team 7", placeholder="Team 7")
        input.input-small(id="team8", type="text", name="Team 8", placeholder="Team 8")
        br
        button.btn.btn-primary.btn-mini(type="submit", value="Submit") Submit
        button#buttontest.btn.btn-primary.btn-mini(type="button") Submit
div.container
    div.bracket

https://raw.github.com/teijo/jquery-bracket/master/jquery.bracket.js

https://raw.github.com/teijo/jquery-bracket/master/jquery.bracket.css

还有 singleElim - http://pastebin.com/z6KvRqGU

Answer 1

在初始化括号之前，您需要保持.bracketdiv 可见。因此display:none，从您的custom.css样式表中删除，然后在您的singleElim8.js文件中执行此操作。

$(function() {
    $('#singleElim8').bracket({
        init: singleElim8Data
    })
    $('.bracket').hide();
});

在你的 8teams 玉中使用你原来的 js：

$('#buttontest').click(function() {
    $('div.bracket').show();
    $('div.teamList').hide();
});

Answer 2

包括clearfix

包括 clearfix CSS 并以这种方式添加：

div.container.clearfix

或者简单，给这个divCSSoverflow: hidden;