jQuery显示/隐藏特定新闻 - 取决于点击

Question

好的，这有点难以解释。我基本上有一个用PHP编写的自定义基本新闻系统。在显示新闻时，我使用jQuery“点击显示完整的新闻文章”

以下是我网站的预览，您可以通过图片了解更多信息：

基本上，完整的新闻文章在内部回应 这意味着当点击“查看完整文章”时，它会打开它们。

如果有人设法解决此问题，请提前感谢。

<script type="text/javascript">
$(document).ready(
    function(){
        $("#show").click(function () {
            $(".news").show("slow");
        });

    });
</script>

Answer 1

我假设你想展示一篇特定的文章而不是展示所有这些文章。有多种方法可以做到这一点，主要取决于你如何构建HTML。但我想你有类似的东西：

...
<div class="article">
  <h2>Title</h2>
  <p class="summary">Short Summary of the article</p>
  <p class="news" style="display:none;">FULL ARTICLE</p>  
  <a class="reveal-btn" href="#">Click to reveal full article</a>
</div>

<div class="article">
  <h2>Title</h2>
  <p class="summary">Short Summary of the article</p>
  <p class="news" style="display:none;">FULL ARTICLE</p>  
  <a class="reveal-btn" href="#">Click to reveal full article</a>
</div>
...

jquery中的这类内容应该处理每篇文章切换视图：

$('.article .reveal-btn').click(function(e){
  $('.summary', $(this).parent()).toggle();
  $('.news', $(this).parent()).slideToggle();
});

这样的事情应该可以解决问题。

Answer 2

您是否正在使用.toggle() jQuery函数？

e.g。

$('#btn-reveal-articles').click(function() {
    $('#article-div').toggle();
});

如果没有显示任何代码或明确定义问题，很难确定您的目标。

---

编辑：

我在jsFiddle为你做了一个例子这里是链接： http://jsfiddle.net/tU8a7/ http://jsfiddle.net/tU8a7/1/

<强> HTML

<div class="news">
    <div class="article">
        <a href="#" class="btn-view">View article</a>
        <div class="content">
            My content for the first article
        </div>
    </div>
    <div class="article">
        <a href="#" class="btn-view">View article</a>
        <div class="content">
            My content for the second article
        </div>
    </div>
</div>

<强> CSS

.article .content { display: none; }

<强>的jQuery

$('.btn-view').click(function() {
    $(this).closest('.article').find('.content').toggle();
});

有一大堆切换选项，例如.toggle()，.slideToggle()和.fadeToggle()。每个都有一个速度参数选项，所以你可以设置.toggle(1000)，它会将动画填充一秒钟。

Answer 3

$(".news")是一个类选择器，因此它将选择该类的所有元素。如果您希望单独显示每个“文章”，则需要为每个“文章”提供唯一标识符;例如：

<a class="news-toggle" href="#article-1">Show</a>
<div id="article-1" class="news">

</div>

和

$(function(){

    $('a.news-toggle').on('click', function(e){
        var toShow = $(this).attr('href');
        $(toShow).show(); // or use slideToggle() to use same "button" to hide/show
    });

});

Answer 4

为了解决这样的问题，我将父id附加为子类的后缀或id

<div id="article-1">
  <div id="excerpt-1>blah blah ..</div>
  <span id="readmore-1" class="read-more">read full article</span>
  <div id="full-article-1">
    blah blah ...
  </div>
</div>

在这种情况下，父ID为 1 ，然后获取

$('.read-more').on('click', function(){
  var id = this.id.split('-')[1];
  $('#full-article-'+id).show('slow');
});