jQuery 文本框不显示

Question

我试图在有人点击“点击我”按钮时显示一个文本框 Check here

当用户点击“点击我”按钮时我想显示区域彩色框。

这是我的代码。

HTML

<h1>Welcome to QuickSchools</h1>


<div id="section" style="display:none;">Here is a new section</div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting</div>
<button type="button" id="btn">Click Me</button>

CSS

#section{
background-color:red;
margin-left: 363px;
width: 200px;
height: 150px;
margin-top: -61px}

jQuery

$( "button" ).click(function() {
$("#section").show();});

有人能帮忙吗？

这是 jsFiddle:http://jsfiddle.net/nz7z9dtu/

Answer 1

请参阅 jsfiddle - http://jsfiddle.net/nz7z9dtu/9/

为了实现您正在寻找的东西 - prntscr.com/6tpi12 - 您应该在点击时减小“内容”类 div 的宽度并显示“部分”类。为此，您的 jquery 应该如下所示:

$( "button" ).click(function() {
    $(".section").show();
    $(".content").css("width", "70%")
});