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

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

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

基本上，完整的新闻文章都是在 这意味着当点击“查看完整文章”时，它会打开所有文章

如果有人能够解决此问题，请提前向您表示感谢

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

    });
</script>

$（文件）。准备好了吗(
函数（）{
$（“#显示”）。单击（函数（）{
$（“.news”）.show（“slow”）；
});
});

您在使用

.toggle（）

jQuery函数吗

e、 g

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

---

编辑： 我在JSFIDLE上为您创建了一个示例，链接如下：

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>

jQuery

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

---

有很多切换选项，例如

.toggle（）

、

.slideToggle（）

和

.fadeToggle（）

。每个都有一个速度参数选项，因此您可以设置

.toggle（1000）

，它会将动画填充一秒钟。

我假设您希望显示一篇特定的文章，而不是显示所有文章。有多种方法可以做到这一点，主要取决于您如何构造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>
...

像这样的东西应该能奏效

$（“.news”）

是一个类选择器，因此它将选择该类的所有元素。如果您想单独显示每个“文章”，则需要为每个“文章”提供一个唯一的标识符；例如：

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

</div>

---

为了解决这样的问题，我附加了父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>

---

到底是什么造成了问题？你尝试了什么？我没有真正的错误，但更多的是一个错误。例如，当我点击“查看全文”时，所有新闻都会打开。请发布一些代码。在你展示代码之前，没有人能告诉你代码出了什么问题。基本上就是这样。就像我说的，很难解释。单击“查看完整新闻”时，它将显示所有我的新闻将显示的所有含义。请发布您的HTML标记。似乎

$（'.news'）

匹配每个新容器。您需要使用更具体的选择器。公平地说，我对jQuery和PHP相当陌生。假设我有几篇新闻文章都在里面，我怎么才能让它只出现用户希望出现的那篇？不是显示每个class=“news”？我已经编辑了我的答案，为您在JSFIDLE上添加了一个示例，希望它能对您有所帮助谢谢！我已经调整了你的答案和一些答案，并设法解决了它。谢谢你的努力：）谢谢，你已经解释了我的问题是什么！我现在就来试试：-）这已经起作用了，但是你怎么能创建一个类似的代码来实现它的功能呢？此外，是否可以添加一些效果，如幻灯片？是的。使用

.slideDown

和

.slideUp

而不是

.show

和

隐藏

制作动画。不知道你说的第一个问题是什么意思。如果您的意思是切换而不是仅显示，则可以使用

切换

而不是

.hide

。我认为还有

.slideToggle

来获得动画效果。刚刚更新了代码以反映切换，而不是隐藏/显示。感谢您的帮助，非常感谢@mkhatib我们还可以自定义slideUp和slideDown的计时吗？

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

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

});

<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>

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