0

この効果を HTML、bootstrap2、および JS で実装しています。

申し訳ありませんが、まだ動作する例がなく、どこでもデモできる例が見つかりませんでした。そのため、やりたいことを詳細に説明します。
これは、縦に並べられた 2 つの「カード」を視覚的に含むプレーンな HTML ページです。カードは aと a をdiv含むだけである可能性があります。最初は 1 枚のカードだけが表示され、もう 1 枚は非表示になっています。ページ サイズが 1 枚のカードに収まることを願っています。カード 1 のボタンをクリックすると、ページの高さが 2 枚のカードに収まるように大きくなり、カード 2 が表示されます。textboxbutton

私の不確実な部分は次のとおりです。最初にdivを非表示にして、ボタンをクリックして表示するにはどうすればよいですか? (ページサイズがカードの数に合うようにしたい) 私は Web 開発にあまり慣れていないので、実際の例は非常に役に立ちます!

ありがとうございました！

4

3 に答える 3

1

これは、私が調理したばかりの良い例です。

すでにHTML と CSSの設定が完了しているはずですが、私が使用したのは次のとおりです。

HTML

<!-- Card 1 -->
<div>
    <textarea></textarea>
    <button id="clickMe">Show second card</button>
</div>

<!-- Card 2 -->
<div style="display: none;" id="newCard">
    <textarea></textarea>
    <button>Do nothing</button>
</div>

CSS:

div{ /* A bit of random styling */
    box-sizing: border-box;
    width: 70%;
    margin: 30px 15%;
    background: skyblue;
    border: 2px solid #EEE;
    text-align:center;
    padding: 50px;
}

バニラ Javascript

var button = document.getElementById('clickMe');  // 1
var newCard = document.getElementById('newCard'); // 2
button.addEventListener('click', function() {     // 3
   newCard.style.display = 'block';               // 4
});

情報

  1. を持つ要素を取得しIDますclickMe
  2. を持つ要素を取得しIDますnewCard
  3. clickMe要素がいつであるかをリッスンしますclicked
  4. の表示を に設定しclickMeた場合clickednewCardblock

実際のデモ: http://jsfiddle.net/T4yxz/

于 2013-08-20T22:39:43.770 に答える
1

要素の表示/非表示を jQuery に頼ることができます。div 要素を非表示に設定し、ボタンの onclick イベントで要素を非表示/表示する必要があります。

jQuery の API を見てみましょう。

http://api.jquery.com/show/

http://api.jquery.com/hide/

http://api.jquery.com/toggle/

簡単な例: http://jsfiddle.net/mrkre/KKLZ4/

$('#HideHidden').click(function() {   
    $(".hidden-div").hide();
});

$('#ShowHidden').click(function() {   
    $(".hidden-div").show();
});

次に、高さ要素の css を操作する必要があります。

于 2013-08-20T06:02:50.437 に答える