JavaScript：点击展开区域

我想要做的是当用户点击textarea时，它会展开div以显示'发布'按钮。JavaScript：点击展开区域

这里是我的意思图片： enter image description here

所以，当用户单击文本框区域，我需要的背景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的经验，但我认为这是一个简单的足够的项目完成后才能够看清楚基本。

来源

2013-07-19 Erik Fischer

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

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即可看到它。

由于点击事件将DOM传播到document，因此绑定到document的事件处理程序会在每次点击页面时触发。 document一旦触发事件，处理程序将检查target（也称为单元元素）是否在well内有父项。如果是这样，我们不会执行任何操作，因为当用户单击textarea或button本身时，我们不想隐藏按钮。如果咔嗒声在井外，我们会调用按钮上的slideup功能以时尚的方式隐藏它。

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

来源

2013-07-19 00:33:22

哈，我采取了复杂的方式：http://jsfiddle.net/shawn31313/MgcDU/6021/。不过我有一个动画。 – Shawn31313

有没有办法让它扩展而不是瞬间？喜欢，实际上显示它扩大的动画？另外，如果您点击离开，您是否可以将其扩展回来？ –

而不是'show'，你可以使用'slideDown'。看到更新的小提琴。 –

凯文的答案是你想要的，但我只是感觉实验与一些CSS我有，所以我只是想将它张贴。这是一个fadeInDown按钮。您可能想要在您的网站上托管CSS。我只是使用了我的一些代码。你可以把这个小提琴改成fadeIn或其他的东西（只要在Google上搜索animate.css）。 http://jsfiddle.net/shaansingh/MgcDU/6024/embedded/result/

来源

2013-07-19 01:05:15

JavaScript：点击展开区域

回答

相关问题