Простое jquery на основе классов показать / скрыть для нескольких независимых экземпляров? - PullRequest
Новая
       22

Простое jquery на основе классов показать / скрыть для нескольких независимых экземпляров?

0 голосов
/ 29 июня 2010

Есть ли способ иметь много-много экземпляров show / hide на основе jquery (ссылка переключения, за которой следует контейнер со скрытым содержимым; изменение текста в зависимости от состояния) на странице, использующей только классы, а не идентификаторы?Я нигде не нашел достаточно хорошо документированного и функционального примера.Спасибо за любую помощь!--cg

Ответы [ 2 ]

1 голос
/ 29 июня 2010

Что-то вроде: 

<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();
});

Вам не нужен внешний div, если вы используете next () вместо братьев и сестер, но он крепче связывает скрипт с разметкой.

0 голосов
/ 29 июня 2010

Большое спасибо, Роб. Работает хорошо! Мне удалось сделать так, чтобы вторичные классы могли контролировать, что текст переключения в обоих состояниях: 

<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

...