Question

我习惯使用Wordpress，但在这种情况下我使用的是另一个平台（Squarespace）。我需要能够在本网站的博客部分显示点击内容。

示例：在新闻页面中，我有一个新闻列表，每篇文章的摘录。点击后，我想显示内容而不是摘录。

我遇到的问题是，如果我点击，它会显示所有帖子中的所有内容，而不仅仅是我点击的内容。

我所做的过程是在我的博客列表页面上我显示了每个“帖子摘录”和完整内容，我将隐藏全部内容并显示在灯箱中。

这是我到目前为止所做的，但它不起作用，没有任何反应：

标记{id}将路径作为类提供 - 它在源代码中显示正常。

有人有任何建议吗？

到目前为止，我的代码就像（显示列表）：

`

 <article class="entry cf {@|item-classes}" id="article-{id}" data-item-id="{id}">
 {.main-image?}
<div class="main-image-wrapper">
  <a href="{fullUrl}"><div class="main-image content-fill"><img {@|image-meta} /></div></a>
</div>
{.end}


  <div class="entry-meta">
                {.section categories}<div><em>{.equal? collection.typeName "products"}Found{.or}{.end} </em> {.repeated section @}<a href="{collection.fullUrl}?category={@|url-encode}" rel="tag">{@}</a>{.alternates with}, {.end}</div>{.end}
                {.if categories && tags} <em></em> {.end}

              </div>
<div id="all-content">

<div class="entry-title-wrapper">
  <h1 data-content-field="title" class="entry-title">
  {.passthrough?}
    <a href="{sourceUrl}" class="entry-title-passthrough" target="_blank">{title}</a>
  {.or}
   <p class="date">
    <time class="published" datetime="{addedOn|date %F}">{addedOn|date %B %e, %Y}</time>
  </p>
    <a href="{fullUrl}">{title}</a>
  {.end}
  </h1>

</div>

</div>

<div class="entry-content">

  {.excerpt?}
    {excerpt}
  {.or}
    {.section body}
        {@}
      {.end}
    {.end}
    <p class="entry-actions-simple">
      {.comments?}
        <a class="entry-comments" href="{fullUrl}#comments-outer-wrapper" title="Comments">
        {.if websiteSettings.disqusShortname}
        {@|comment-link}
        {.or}
        {.section publicCommentCount}
        {@} Comment{@|pluralize}
        {.or}
          Comment
        {.end}
      {.end}
      </a>
    {.end}
    {@|like-button}{@|social-button-inline}
  </p>
     <header class="entry-header cf">

  <p class="entry-actions">
    {.comments?}
      <a class="entry-comments" href="{fullUrl}#comments-outer-wrapper" title="Comments">
      {.if websiteSettings.disqusShortname}
        {@|comment-link}
      {.or}
      {.section publicCommentCount}
        {@} Comment{@|pluralize}
        {.or}
          Comment
        {.end}
      {.end}
      </a>
    {.end}
  </p>

  <p class="entry-more-link"><a class="more" href="#" data-featherlight="#fl1 {id}"></a></p>

`

并显示内容：

<div style='display:none'>
  <div class="lightbox" id="fl1">

 <div class="main-image-wrapper">
<img style="width:100%" {@|image-meta} />
  </div>


    <div class="entry-meta">
                {.section categories}<div><em>{.equal? collection.typeName "products"}Found{.or}{.end} </em> {.repeated section @}<a href="{collection.fullUrl}?category={@|url-encode}" rel="tag">{@}</a>{.alternates with}, {.end}</div>{.end}
                {.if categories && tags} <em></em> {.end}

              </div>
<div id="all-content">

<div class="entry-title-wrapper">
  <h1 data-content-field="title" class="entry-title">
  {.passthrough?}
    <a href="{sourceUrl}" class="entry-title-passthrough" target="_blank">{title}</a>
  {.or}
   <p class="date">
    <time class="published" datetime="{addedOn|date %F}">{addedOn|date %B %e, %Y}</time>
  </p>
    <a class="lightbox" href="{fullUrl}">{title}</a>
  {.end}
  </h1>

</div>

</div>

<div class="entry-content lightbox">

  {.excerpt?}
    {excerpt}
   <span style="font-size:16px">        {.section body}
</span> 


      {@}
    {.end}
  {.end}
  <p class="entry-actions-simple">
    {.comments?}
      <a class="entry-comments" href="{fullUrl}#comments-outer-wrapper" title="Comments">
      {.if websiteSettings.disqusShortname}
        {@|comment-link}
      {.or}
      {.section publicCommentCount}
        {@} Comment{@|pluralize}
        {.or}
          Comment
        {.end}
      {.end}
      </a>
    {.end}
      {@|like-button}{@|social-button-inline}
     </p>
<header class="entry-header cf lightbox">

         {@|like-button}{@|social-button-inline}

 <div class="tag" style="float:right">
 {.section tags}<div><em><img style="width:20px;padding-right:10px" src="https://four23main.squarespace.com/assets/images/tag.png"></em> {.repeated section @}<a href="{collection.fullUrl}?tag={@|url-encode}" rel="tag">{@}</a>{.alternates with}, {.end}</div>{.end}
                {.passthrough?}
                {.or}
                {.section sourceUrl}<div class="source-url"><a href="{sourceUrl}" target="_blank">Source</a></div>{.end}
                {.end}
                </dv>
</header>
</div>

Answer 1

你可以选择像

这样的东西

$('#mainArticle').click(function () {
    if ($('#mainArticle').hasClass("expanded")) {
        $('#mainArticle').css("height", "40px");
        $('#mainArticle p:first-child').css("width", "12em");
        $('#mainArticle p:first-child').css("white-space", "nowrap");
        $('#mainArticle').removeClass("expanded");
    } else {
        $('#mainArticle').css("height", "100%");
        $('#mainArticle p:first-child').css("width", "100%");
        $('#mainArticle p:first-child').css("white-space", "normal");
        $('#mainArticle').addClass("expanded");
    }
});

这里实际上是http://jsfiddle.net/link2twenty/tgdn64jx/

按ID显示/隐藏点击内容

1 个答案: