展开焦点上的文本区域，并返回到以前的非焦点区域。

Question

我有一个文字区。每当有人点击文本区域，那么高度就会增加，再点击屏幕上任何地方的高度都会降低。

<textarea id="revbox" style="height: 50px; width: 260px;"></textarea>

<script>

    $('textarea#revbox').focus(function () {
    $('textarea#revbox').animate({ height: 150 }, 1000); 
});
</script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

但代码不起作用。我怎么能这么做？

Answer 1

您的代码对focus事件很好，您只需要为blur事件添加类似的代码。试试这个：

​

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<textarea id="revbox" style="height: 50px; width: 260px;"></textarea>

<script>

    $('textarea#revbox').focus(function () {
        $('textarea#revbox').animate({ height: 150 }, 1000); 
    });

    $('textarea#revbox').blur(function () {
        $('textarea#revbox').animate({ height: 50 }, 1000); 
    });
</script>

​

请注意，您需要在顶部包括jQuery (最好在<header>中)。

Answer 2

尝试使用mouseenter和mouseleave事件：

​

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="revbox" style="height: 50px; width: 260px;"></textarea>

<script>

    $('textarea#revbox').on("mouseenter",function () {
        $('textarea#revbox').animate({ height: 150 }, 1000); 
    });

    $('textarea#revbox').on("mouseleave",function () {
        $('textarea#revbox').animate({ height: 50 }, 1000); 
    });
</script>

​