JavaScript:点击扩展区域

Question

我想做的是，当用户点击文本区域时，它会展开 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 将点击事件处理程序绑定(bind)到 textarea 和 document。绑定(bind)到 textarea 的事件处理程序只需向下滑动 button 即可使其可见。

绑定(bind)到 document 的事件处理程序在每次点击页面时触发，因为点击事件会向上传播 DOM 到 document .一旦 document 触发了事件，处理程序就会检查 target(也就是点击的元素)是否在 well 中有一个父元素。如果是，我们不执行任何操作，因为当用户在 textarea 或 button 本身内单击时，我们不想隐藏按钮。如果点击在井外，我们会调用按钮上的 slideup 函数以时尚的方式隐藏它。

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