我有一个div,其中包含一组默认显示的文本框和按钮。我还有一组使用jquery制作的锦标赛括号,设置为display: none
。
$('#buttontest').click(function() {
$('div.bracket').show();
$('div.teamList').hide();
});
当我使用这个代码时,它的工作方式是根据显示的内容进行交换,但是当它显示锦标赛括号时,它会破坏它背后的CSS样式,锦标赛树上的团队不匹配。我已在底部链接了两个屏幕截图以突出显示此内容。
以下是锦标赛树应该是什么样子
但是当我隐藏括号并在单击按钮后显示它们时,它会像这样结束
以下是我在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
还有单身人士 - http://pastebin.com/z6KvRqGU
答案 0 :(得分:2)
在初始化括号之前,您需要保持.bracket
div可见。因此,请从display:none
样式表中删除custom.css
,然后在singleElim8.js
文件中执行此操作。
$(function() {
$('#singleElim8').bracket({
init: singleElim8Data
})
$('.bracket').hide();
});
在你的8teams jade中使用你原来的js:
$('#buttontest').click(function() {
$('div.bracket').show();
$('div.teamList').hide();
});
答案 1 :(得分:0)
clearfix
包括clearfix CSS并以这种方式添加:
div.container.clearfix
或者简单一点,给这个div
一个overflow: hidden;