Question

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

Answer 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，但它会将脚本更紧密地绑定到标记。

Answer 2

非常感谢，Rob。效果很好！我已经设法做到这一点，所以二级类可以控制两种状态下切换文本的内容：

<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

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

2 个答案: