Question

你好在搜索了stackoverflow上关于隐藏和取消隐藏内容之后的大部分答案之后我没有得到正确的答案，因为大多数都取决于表格。我的情况是我有我想要的textarea它被点击，一旦人开始输入div扩展并显示一些额外的按钮，如发布或取消按钮，好的例子是谷歌+＆＃34;分享新的＆＃34;主屏幕。

 <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>

Answer 1

你正在寻找这样的东西吗？

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

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
            <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').on('keypress keydown keyup', function(){
                          if ($(this).val().length >0)
                            {
                               $('button').show().removeAttr('disabled');
                               $('.second').show();        
                            }
                          else                
                            {
                              $('button').hide().prop('disabled', true);
                               $('.second').hide();   
                            }
                        });
                      
                      $('#cancel').on('click', function(){                     
                        $('textarea').val('').trigger('keypress');
                        });
                    });
                </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="post" style="display: none" disabled>POST</button>
               </div>
                </form>

Answer 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"/>

您的 TextArea 的类是txtArea1，然后您的脚本可以是：

$(".txtArea1").click(fucntion(){
      $(".btnPost").show();
      $(".btnCancel).show();
});

或

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

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

和动态增加文字区域的大小，您可以访问此site

Answer 3

我在jsfiddle中为您创建了一个示例：http://jsfiddle.net/qbemat6n/

<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>

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

3 个答案: