Разрешение для нескольких экземпляров одной и той же функции jQuery показать / скрыть

0

У меня есть некоторая простая функция show/hide, в которой на данной странице есть несколько новостей, а при загрузке страницы они находятся в состоянии "показывать меньше" - и при нажатии "больше" они скатываются вниз, чтобы показать полную статья. здесь мой код.

$(".show-more").if($(".text").hasClass("show-more-height"));
$(".text").toggleClass("show-more-height");
$(".show-more").toggleClass("show-less");  
});

с моим html, который выглядит примерно так:

<div class="newsitem">
  <div class="text">a bunch of text</div>
  <div class="show-more">
    <span class="more">More</span>
    <span class="less">Less</span> 
  </div>
</div>

По сути, он работает нормально - но если у меня есть несколько новостей на странице, событие click вызывает все, чтобы показать/скрыть. Я предполагаю, что мне нужно настроить таргетинг на.newsitem, а затем использовать "это", но я не уверен, как это сделать.

Заранее спасибо.

  • 1
    Он работает нормально, поэтому у вас есть метод jQuery.fn.if() , что он делает?
  • 0
    Звучание цепочек звучит забавно и страшно.
Показать ещё 1 комментарий
Теги:
show-hide
toggleclass

1 ответ

1
Лучший ответ

Я считаю, что вы хотите $(this).find('.show-more') но вы можете приблизиться к этому чуть меньше javascripty.

Вот что я думаю:

$('.news-items').on('click', '.show-more,.show-less', function () {
  var $newsItem = $(this).closest('.news-item');
  $newsItem.toggleClass('expanded');
});

Затем управляйте меньшим дисплеем от css.

.news-item {
  border: 1px solid red;
  margin-bottom: 10px;
}
.news-item.expanded {
  height: 300px;
}

.show-less {
  display: none;
}

.expanded .show-more {
  display: none;
}

.expanded .show-less {
  display: block;
}

Вот небольшая демонстрация: http://jsbin.com/bidawudu/3/edit?html,js,output

Поделиться
  • 0
    Спасибо, Билл, это близко к тому, на что я смотрю, но у меня зависает то, что кнопка «показать / скрыть» должна быть единственной кликабельной областью, которая запускает функцию.
  • 0
    Я только что обновил свой ответ.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню