3

私がやろうとしているのは、ユーザーがテキストエリアをクリックすると、div が展開されて「投稿」ボタンが表示されるようにすることです。

これが私が意味することの写真です： ここに画像の説明を入力

したがって、ユーザーがテキストボックス領域をクリックすると、背景の div を展開して「投稿」ボタンを表示する必要があります。

これが私が始めたJSFiddleです：http://jsfiddle.net/MgcDU/6018/

HTML:

<div class="container">
<div class="well">
    <textarea style="width:462px" placeholder="Comment..."></textarea>
    <button class="btn btn-primary" type="button">Post</button>

    <div class="clearfix"></div>
</div>

CSS:

textarea {
  margin-bottom: 0;
}

.btn {
  float: right;
  margin-top: 12px;
}

.container {
  margin:20px 0 0 20px;
}

.well {
  width: 476px;
  padding: 12px;
}

私は JavaScript の経験がありませんが、これは単純なプロジェクトであり、完成したときに基本を理解できるようになっていると思います。

4

2 に答える 2

5

以下をマークアップとスタイリングに追加し、スクリプトを含めます。

HTML

    <button  class="btn btn-primary btn-toggle" type="button">Post</button>

CSS

.btn-toggle{
    display: none;    
}

Javascript

$("textarea").click(function(){
   $(".btn-toggle").slideDown();
});

$(document).click(function(e){
    e.stopPropagation();
    if($(e.target).parents(".well").length == 0){
        $(".btn-toggle").slideUp();
    }
});

Javascript のこのセグメントは、クリック イベント ハンドラをtextareaおよび にバインドしますdocument。にバインドされたイベント ハンドラは、textarea単に下にスライドしbuttonて表示されます。

にバインドされたイベント ハンドラは、クリック イベントがからdocumentまで伝搬されるため、ページがクリックされるたびに起動されます。がイベントを発生させると、ハンドラーは(クリックされた要素) が 内に親を持っているかどうかを確認します。その場合、ユーザーがまたは自体の内側をクリックしたときにボタンを非表示にしたくないため、アクションを実行しません。クリックがウェルの外にある場合は、ボタンの関数を呼び出してスタイリッシュな方法で非表示にします。DOMdocumentdocumenttargetwelltextareabuttonslideup

作業例: http://jsfiddle.net/MgcDU/6025/

于 2013-07-19T00:33:22.370 に答える
1

ケビンの答えはあなたが望むものですが、私は自分が持っていたいくつかの CSS を実験的に感じていたので、投稿したかっただけです。これはfadeInDownボタンです。Web サイトで CSS をホストすることができます。私はちょうど私が持っていたいくつかのコードを使用しました。このフィドルは、fadeIn などに変更できます (Google で animate.css を検索してください)。http://jsfiddle.net/shaansingh/MgcDU/6024/embedded/result/

于 2013-07-19T01:05:15.200 に答える