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

【问题标题】：jQuery show/hide specific news - depending on clickjQuery 显示/隐藏特定新闻 - 取决于点击
【发布时间】：2013-05-05 21:21:12
【问题描述】：

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

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

基本上，完整的新闻文章会在一个这意味着当点击“查看全文”时，它将全部打开。

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

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

    });
</script>

【问题讨论】：

究竟是什么造成了问题？你试过什么？
我没有真正的错误，但更多的是错误。例如，当我点击“查看全文”时，它会打开所有新闻。
请发布您的一些代码。在您展示代码之前，没有人能说出您的代码出了什么问题。
基本上就是这样。就像我说的，这很难解释。当点击“查看完整新闻”时，它会显示每个
，这意味着将显示我所有的新闻。
请也发布您的 HTML 标记。 $('.news') 似乎与每个新容器匹配。您需要使用更具体的选择器。

标签： php javascript jquery

【解决方案1】：

你在关注.toggle() jQuery 函数吗？

例如

$('#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)，它会填充动画一秒钟。

【讨论】：

公平地说，我对 jQuery 和 PHP 还很陌生。假设我有几篇新闻文章都在
我将如何使它只有用户想要出现的那一篇出现？而不是显示每个 class="news" ？
我已经编辑了我的答案，在 jsFiddle 上为您添加了一个示例，希望对您有所帮助
非常感谢！我已经调整了你的答案和一些答案，并设法解决了它。谢谢你的努力:)

【解决方案2】：

为了解决这样的问题，我将父 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');
});

【讨论】：

【解决方案3】：

我假设您想展示一篇特定的文章，而不是展示所有文章。有多种方法可以做到这一点，主要取决于您如何构建 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();
});

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

【讨论】：

谢谢，您已经解释了我的问题所在！我现在就试试看:-)
这已经奏效了，但是你怎么能创建一个类似的代码来接近/相反呢？另外，是否可以添加一些像幻灯片这样的效果？
是的。使用.slideDown 和.slideUp 而不是.show 和.hide 进行动画制作。不知道第一个问题是什么意思。如果您的意思是切换而不是仅显示，则可以使用toggle 而不是.hide。我想还有.slideToggle 来获得动画效果。刚刚更新了代码以反映切换而不是隐藏/显示。
感谢您的帮助，非常感谢！
@mkhatib 我们还能自定义 slideUp 和 slideDown 的时间吗？

【解决方案4】：

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

});

【讨论】：