Question

我在while循环中创建了显示MySQL查询的div。我想隐藏并用.slideToggle显示它们。我不能使用一个类，因为它会触发页面上的每个特定div以向下滑动。

我认为这会在while循环中重复并找到最接近的toggleSectionDyn div id。显然不是。

<div class="actions"><a href="#" id="toggleButtonDyn">Add</a></div>
<div id="toggleSectionDyn">Some content</div>
<script>
  $("#toggleButtonDyn").click(function(){
    $(this).closest("#toggleSectionDyn").slideToggle("slow");
    return false;
  });
</script>

Answer 1

编辑：live已被弃用。考虑使用.on（）

您想使用.live()

 $("#toggleButtonDyn").live('click', (function(){
    $(this).closest("#toggleSectionDyn").slideToggle("slow");
    return false;
  });

来自.live() api

.live（）方法可以通过使用事件委托来影响尚未添加到DOM 的元素：绑定到祖先元素的处理程序负责事件触发了它的后代。传递给.live（）的处理程序永远不会绑定到元素;相反，.live（）将一个特殊的处理程序绑定到DOM树的根目录。

现在，重新阅读后，我想知道你的要求是什么。您还必须确保每个<div>必须具有唯一ID。您可以考虑.next('div')而不是.closest()

根据评论中的讨论，我会使用.next（'div'）查看昨天问题http://jsfiddle.net/ycpgD/

中修改过的jsfiddle

另外，我强烈建议使用唯一ID。如果他们不能独特使他们上课。

Answer 2

如果你稍微重构一下，你可以定位你所追求的div。（也许我在这里错过了这个问题，但我的解决方案非常简单。）

http://jsfiddle.net/8nXvX/

<div class="actions">
    <div><a href="#">Add</a>
        <p>Some content</p></div>
    <div><a href="#">Add</a>
        <p>Some content</p></div>
</div>

  $(".actions a").click(function(){
    $(this).next('p').slideToggle("slow");
    return false;
  });

我认为这取决于您生成<a>的位置。如果要隐藏整个MySQL结果集，还是一次显示/隐藏每一行？

将.slideToggle与动态生成的div一起使用

2 个答案: