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 将 click 事件处理程序绑定到textareadocument. 绑定到的事件处理程序textarea简单地向下滑动button以使其可见。

由于document点击事件向上传播DOMdocument. 一旦document触发事件,处理程序会检查target(又名单击的元素)是否在well. 如果是这样,我们不执行任何操作,因为我们不想在用户单击内部textareabutton本身时隐藏按钮。如果点击在井外,我们调用slideup按钮上的函数以时尚的方式隐藏它。

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

于 2013-07-19T00:33:22.370 回答
1

凯文的答案是你想要的答案,但我只是对我拥有的一些 CSS 进行实验,所以我只想发布它。这是一个fadeInDown按钮。您可能希望在您的网站上托管 CSS。我只是使用了一些我拥有的代码。您可以将此小提琴更改为淡入淡出或其他内容(只需在 Google 上搜索 animate.css)。http://jsfiddle.net/shaansingh/MgcDU/6024/embedded/result/

于 2013-07-19T01:05:15.200 回答