简单的基于类的 jquery 显示/隐藏多个独立实例？答案

【问题标题】：SImple class-based jquery show/hide for multiple, independent instances?简单的基于类的 jquery 显示/隐藏多个独立实例？
【发布时间】：2010-06-29 03:39:39
【问题描述】：

有没有办法在仅使用类而不使用 ID 的页面上拥有许多基于 jquery 的显示/隐藏实例（切换链接后跟具有隐藏内容的容器；切换文本根据状态更改）？我在任何地方都没有找到一个记录合理的功能示例。感谢您的帮助！ --cg

【问题讨论】：

标签： jquery user-interface hide toggle show

【解决方案1】：

类似：

<div class="toggleset">
  <a class="toggler" href="#">Hide</a>
  <div class="container">
    Data to show/hide
  </div>
</div>

$('.toggler').click(function(evt) {
  var $toggler = $(this);
  var $container = $toggler.siblings('.container');

  $container.toggle();
  $toggler.text($container.is(':visible') ? "Hide" : "Show");
  evt.preventDefault();
});

如果使用 next() 而不是兄弟，则不需要外部 div，但它将脚本与标记更紧密地联系在一起。

【讨论】：

【解决方案2】：

非常感谢，罗伯。效果很好！我已经设法做到了，所以二级班级可以控制两种状态下的切换文本：

<script type="text/javascript">
<!--
$(document).ready(function() {

$('.toggler.show').click(function(evt) {
  var $toggler = $(this);
  var $container = $toggler.siblings('.container');

  $container.toggle();
  $toggler.text($container.is(':visible') ? "Show less" : "Show more");
  $(this).toggleClass('active');
})

$('.toggler.read').click(function(evt) {
  var $toggler = $(this);
  var $container = $toggler.siblings('.container');

  $container.toggle();
  $toggler.text($container.is(':visible') ? "Read less" : "... Read more");
  $(this).toggleClass('active');
})
evt.preventDefault();
});
-->
</script>

我将如何利用 jquery“幻灯片”切换？我尝试改变

$container.toggle();

类似

$container.slideToggle('fast');

但这会破坏切换上的文本更改。 --cg

【讨论】：

文本更改被破坏，因为容器的可见性在动画完成之前不是最终的。要解决此问题，请在执行 slideToggle 之前检查 $container.is('visible') 并预计状态会发生变化。即， $container.is(':visible') == true 将暗示“阅读更多”的文本，因为我们即将隐藏容器。然后，您可以使用动画隐藏（jquery 通过随时间更改 css 属性来实现幻灯片，但最后它将被隐藏）。如果这个答案是正确的，您可以投票并将其标记为答案吗？谢谢，祝你好运！