2

デフォルトで表示されているテキストボックスとボタンのセットを含む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

4

2 に答える 2

2

.bracketブラケットを初期化するまで、div を表示したままにする必要があります。したがって、スタイルシートから削除display:noneしてから、ファイルでこれを実行してください。custom.csssingleElim8.js

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

あなたの 8teams jade では、元の js を使用します。

$('#buttontest').click(function() {
    $('div.bracket').show();
    $('div.teamList').hide();
});
于 2012-12-21T04:17:45.293 に答える
0

含むclearfix

clearfix CSSを含め、次のように追加します。

div.container.clearfix

または単純に、これdivにCSSを与えますoverflow: hidden;

于 2012-12-21T02:06:15.827 に答える