Javascript 使用jquery取消隐藏和隐藏div中的内容_Javascript_Jquery_Html_Css

Javascript 使用jquery取消隐藏和隐藏div中的内容

javascript jquery html css

Javascript 使用jquery取消隐藏和隐藏div中的内容,javascript,jquery,html,css,Javascript,Jquery,Html,Css,您好在stackoverflow上搜索了关于在div中隐藏和取消隐藏内容的大多数答案后，我没有得到正确的答案，因为其中大多数答案都取决于表单。我的情况是，我有一个文本区域，我希望它被点击，一旦用户开始键入，div就会展开并显示一些额外的按钮，如Post或取消按钮，谷歌+“分享最新信息”主屏幕就是一个很好的例子 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

您好在stackoverflow上搜索了关于在div中隐藏和取消隐藏内容的大多数答案后，我没有得到正确的答案，因为其中大多数答案都取决于表单。我的情况是，我有一个文本区域，我希望它被点击，一旦用户开始键入，div就会展开并显示一些额外的按钮，如Post或取消按钮，谷歌+“分享最新信息”主屏幕就是一个很好的例子

 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
    <script type="text/javascript"> 
        $(function(){
            $('textarea').click(function(){
                $('button').show().removeAttr('disabled');
                $('.second').show();                  
            });
        });
    </script>

</head>
<body>
    <form>
    <div>
        <textarea></textarea>
        <br>
        <div class="second" style="display: none" disabled>
        <label>Where:</label><button>place1</button> Or <button>Place2</button><br>
        <label>Tags:</label><button>Good Service</button>
        <button>Minor</button>
        <button>Major</button>

        </div>
        <button id="cancel" style="display: none" disabled>Cancel</button>
        <button id="cancel" style="display: none" disabled>POST</button>
   </div>
    </form>


$（函数（）{
$（'textarea'）。单击（函数（）{
$（'button'）.show（）.removeAttr（'disabled'）；
$（'.second'）.show（）；
});
});


其中：位置1或位置2

标签：服务好
少数的
专业
取消
邮递

您可以执行以下操作：

<button type="button" class="btnPost" style="display:none" id="btnPost" text="Post"/>
<button type="button" class="btnCancel" style="display:none" id="btnCancel" text="Cancel"/>

或

您可以将脚本中的css更改为：

 $(".txtArea1").click(fucntion(){
          $(".btnPost").css("display","block");
          $(".btnCancel).show("display,"block");
    });

要动态增加文本区域的大小，您可以访问以下内容

我在JSFIDLE中为您创建了一个示例：


附加按钮：SubmitClear
$（'document'）.ready（函数（）{
$（'#status'）。焦点（函数（）{
$（“#附加按钮”）.fadeIn（200）；
});
});

以下是它如何应用于现有代码：

$('document').ready(function(){
    $('#status').focus(function() {
        $('#second').fadeIn(200);               
    });
});

 <div>
     <textarea id="status" ></textarea>
     <br>

     <div class="second" style="display: none" disabled>
         <label>Where:</label><button>place1</button> Or <button>Place2</button>  <br>
        <label>Tags:</label><button>Good Service</button>

         <button>Minor</button>
         <button>Major</button>
    </div>

    <button id="cancel" style="display: none" disabled>Cancel</button>
    <button id="cancel" style="display: none" disabled>POST</button>
 </div>

$（'document'）.ready（函数（）{
$（'#status'）。焦点（函数（）{
美元("秒").法代因(200),；
});
});


其中：位置1或位置2

标签：服务好
少数的
专业
取消
邮递

你在找这样的东西吗

您所要做的就是处理按键事件，并检查文本框中值的长度以显示或隐藏控件


$（函数（）{
$（'textarea'）。在（'keypress-keydown-keydup'，function（）上{
如果（$（this.val（）.length>0）
{
$（'button'）.show（）.removeAttr（'disabled'）；
$（'.second'）.show（）；
}
其他的
{
$（'button'）.hide（）.prop（'disabled'，true）；
$（'.second'）.hide（）；
}
});
$（'#取消'）。在（'click'，function（）{
$（'textarea'）.val（''）.trigger（'keypress'）；
});
});


其中：位置1或位置2

标签：服务好
少数的
专业
取消
邮递

在这个社区中，我们很乐意帮助他人创建更好的代码并解决问题。不过，有了这个问题，您似乎需要我们为您编写它，这正是Stackoverflow创建的目的。如果您能提供一些您尝试过的代码示例，我们将非常乐意为您提供帮助。我根本不想使用表单标记。有没有方法可以删除表单标记并仅使用div？为什么不可以（只要您不尝试发布任何表单数据）。。你可以把它们排除在外。我更新了代码。这是一个很好的示例，但现在好像“取消”按钮被禁用。我正在尝试修复它以取消扩展。@CleopasManams，我还添加了“取消”事件处理程序。这就是你要找的吗？

<div id='additionalbuttons' style='display:none;'>
    Additional Buttons: <button >Submit</button><button >Clear</button>
</div>
<textarea id="status" placeholder="Write here..." name="new_entry"></textarea>

$('document').ready(function(){
    $('#status').focus(function() {
        $('#additionalbuttons').fadeIn(200);
    });
});

$('document').ready(function(){
    $('#status').focus(function() {
        $('#second').fadeIn(200);               
    });
});

 <div>
     <textarea id="status" ></textarea>
     <br>

     <div class="second" style="display: none" disabled>
         <label>Where:</label><button>place1</button> Or <button>Place2</button>  <br>
        <label>Tags:</label><button>Good Service</button>

         <button>Minor</button>
         <button>Major</button>
    </div>

    <button id="cancel" style="display: none" disabled>Cancel</button>
    <button id="cancel" style="display: none" disabled>POST</button>
 </div>