Question

我有一些简单的显示/隐藏功能 - 在给定页面上有一些新闻项目，而在页面加载时，他们会在＃34;显示更少＆＃34;国家 - 以及点击＆＃34;更多＆＃34;他们滚下来展示完整的文章。这是我的代码。

$(".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>

基本上，它工作正常 - 但如果我在页面上有多个newsitem，则click事件会触发所有显示/隐藏。我猜我需要从.newsitem定位，然后使用＆＃34;这个＆＃34; - 但我不确定该怎么做。

提前致谢。

Answer 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

允许同一jQuery显示/隐藏功能的多个实例

1 个答案: