0

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

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

在此处输入图像描述

基本上，完整的新闻文章会在 a 中回显，这意味着当单击“查看全文”时，它将全部打开。

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

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

    });
</script>
4

4 回答 4

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

像这样的东西应该可以解决问题。

于 2013-05-11T07:58:05.703 回答
0

$(".news") is a class selector, so it will select all elements with that class. You will need to come up with a unique identifier for each "article" if you want them shown individually; for instance:

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

</div>

and

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

});
于 2013-05-11T08:02:17.813 回答
0

你在使用.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)它并将动画填充一秒钟。

于 2013-05-11T07:56:35.867 回答
0

为了解决这样的问题，我将父 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');
});
于 2013-05-11T08:37:17.377 回答