jquery - 展开div+焦点，折叠之前的div，并在新页面上自动展开

Question

我想做一些事情:

1. 焦点 <textarea>扩展 <div> 时框。
2. 折叠之前打开的内容 <div>扩展新框时的框
3. 单击“编辑”链接时，文本将进入 <textarea>待编辑。所以我要么需要一种方法来使用 jQuery 将字符串放入 <textarea>或自动展开<div>显示<textarea>使用其中的字符串进行编辑。

由于我之前的问题，我可以展开/折叠工作:Expanding / Collapsing divs

内容由 PHP/MySQL 生成。

这是我的 fiddle :http://jsfiddle.net/Draven/kUhkP/85/

抱歉，如果我遗漏了任何重要信息，如果我想到应该添加一些内容，我会编辑这篇文章。

有关 #3 的更多信息

当点击“编辑”链接时，页面会“刷新”(这是同一页面，但 URL 发生了变化)，他们想要编辑的内容现在显示在 <textarea> 中。盒子。当页面更改时，它会显示包含所有 <div> 的页面。盒子折叠了。

我需要<div>具有 <textarea> 中的可编辑内容自动扩展。

有没有办法检查 <textarea> 是否存在有内容则有 <div>扩展？

Answer 1

尝试this :

$(document).on('click', '.postreply', function(e) {
    $(this).closest('.blogcontainer').siblings('.blogcontainer').find('.postreplycontainer').slideUp("fast");
    $(this).closest('.blogcontainer').find('.postreplycontainer').slideToggle("fast")
        .find('textarea[name=replycontents]').focus();
});

这里我使用 $(document).on 来将事件委托(delegate)给所有元素，包括当前和 future (动态) 。请记住，如果您曾经使用过 jQuery *pre*1.7，那么您只需将 .on 更改为 .delegate 即可。由于它是委托(delegate)，.delegate 一度看起来很合适，但是，时代已经变了。现在，如果您愿意，您仍然可以使用“.delegat”。 jQuery 已指出，他们没有“弃用”也不打算删除 .delegate。他们只是觉得 1.7 中 .on 的实现取代了 .delegate，因此他们建议使用 .on 进行委托(delegate)。

抛开所有这些华丽的东西，使用 .on 的委托(delegate)形式非常简单，正如您所看到的。规则很简单。 $(selector) 应该是“present onload”的“父”元素，或者您可以简单地使用 $(document)。

您的 .on 参数也同样简单。第一个参数是您要分配的事件的字符串名称。请记住，您可以仅用一个空格来分配多个事件； exp 'change keydown' (这是文本区域的流行事件分配)。

第二个参数与任何其他 jQuery 选择器类似。请记住，将分配满足要求的所有元素。因此像 'div' 这样的东西会为所有 div 元素分配一个事件。

最后一个是“回调”方法。当然，e 代表传入的事件对象。例如，e.target 在函数中与 相同$(这个)

<小时/>

至于#3

如果您每次都重新加载页面，则只需找到第一个包含内容的文本区域并下拉其父容器即可。这仅意味着添加一行简单的代码:

$('.blogcontainer textarea[name=replycontents]').filter(function(i) { return $.trim($(this).val()) != ""; }).closest('.postreplycontainer').slideDown("fast");

将其分解一些:

• $('.blogcontainer textarea[name=replycontents]'):我想您现在已经了解选择器了，但请注意，请记住，您可以使用“any"CSS 选择器作为 jQuery 选择器。
• .filter(function(i) { return $.trim($(this).val()) != ""; }):这个方便的小 jQuery 方法允许我们“过滤” “我们基于给定回调的“选择”结果。
  • (i) 代表索引，从 0 开始。
  • 我在这里使用的返回方法“修剪”文本区域的值，从而删除尾随和前导空格。 - 因此，要编辑的文本区域除了空白之外什么都没有，将返回 false。 -您可能需要编辑此申报表以满足您的需求。
  • 了解更多:http://api.jquery.com/filter/
• .closest('.postreplycontainer'):只需获取与选择器匹配的最接近的父元素。
  • 为什么我们现在需要 parent ？好吧，我们找到了包含内容的文本区域，现在我们需要展开父级。
  • 请记住，虽然多个文本区域可能有内容，但一旦我们将其添加到链中，我们就只能获得第一个具有内容的父级
• .slideDown("fast");:最后，。滑下装有内容的盒子来关闭链条!

参见Fiddle Here !请记住，我不会“重新加载”页面或任何内容。但是，通过在那里放置线条，第一个包含内容的框将始终滑落。如果不需要，您可能需要考虑使用 jQuery's Ajax为了编辑一个框。