JavaScript：点击时展开区域

Question

我要做的是，当用户点击textarea时，它会扩展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经验，但我认为这是一个足够简单的项目，在完成后可以了解基础知识。

Answer 1

将以下内容添加到标记和样式中并包含脚本。

<强> 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的事件处理程序会在页面上的每次点击时触发，因为点击事件会在DOM向上传播到document。一旦document触发事件，处理程序就会检查target（已点击的元素）是否在well内有父项。如果是这样，我们就不会执行任何操作，因为当用户点击textarea或button本身时，我们不想隐藏按钮。如果点击位于井外，我们会调用按钮上的slideup功能，以便以时尚的方式隐藏它。

工作示例： http://jsfiddle.net/MgcDU/6025/

Answer 2

凯文的回答是你想要的，但我只是觉得我有一些CSS的实验，所以我只想发布它。这是一个fadeInDown按钮。您可能希望在您的网站上托管CSS。我刚刚使用了一些代码。您可以将此小提琴更改为fadeIn或其他内容（只需在Google上搜索animate.css）。 http://jsfiddle.net/shaansingh/MgcDU/6024/embedded/result/