显示来自Twig的数据而无需重新加载页面

Question

首先，我想问一下如何让我的代码能够为用户点击一个href然后它会显示{{media.content}}隐藏其他循环结果。

现在，cms的用户需要创建一个新页面，只是为了调用组件来查看特定页面，它涉及一些他们不知道的编码。

{% set medias = __SELF__.medias %}
<div class="post-list">
    {% for media in medias %}
    <script>
    function loadDoc() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
          document.getElementById("demo").innerHTML = xhttp.responseText;
        }
      };
      xhttp.open("GET", "/about/media-room/media-coverage", true);
      xhttp.send();
    }
    </script>

    <div class="post-item">
        <h3 class="oc-text-title"><a id="demo" class="link_orange" onclick="loadDoc()">{{ media.title }}</a></h3>
        <p class="oc-text-paragraph">{{ media.published_at|date('j F Y') }}</p>

        {% if media.introductory %}
        <!--<p class="introductory">{{ media.introductory|raw }}</p>-->
        {% else %}
        <!--<div class="content">{{ media.content|raw }}</div>-->
        {% endif %}
    </div>
    {% else %}
    <span class="no-data">{{ noMediasMessage }}</span>
    {% endfor %}
</div>

{{ medias.render|raw }}

那么我怎样才能实现这一目标而不需要通过点击一个href来创建一个新页面然后它会转到它受尊重的内容？

见下面的图片

以下是所有循环结果

我想让href查看这样的内容而不需要加载页面。只需隐藏循环并查看其内容

Answer 1

这就是你解决这个问题的方法。不是按ajax提取内容，而是将其放在html内，并使用一些javascript来toggle它的容器。

	$(function() {
		$('.post-item h3 a.link_orange').on('click', function(e) {
			$(this).parent().next().next().slideToggle();
		});
	});

	.hidden {
		display : none;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="post-list">
    {% for media in medias %}
		<div class="post-item">
			<h3 class="oc-text-title">
				<a class="link_orange">{{ media.title }}</a>
			</h3>
			<p class="oc-text-paragraph">{{ media.published_at|date('j F Y') }}</p>

			{% if media.introductory %}
				<p class="hidden introductory">{{ media.introductory|raw }}</p
			{% else %}
				<div class="hidden content">{{ media.content|raw }}</div>
			{% endif %}
		</div>
    {% else %}
		<span class="no-data">{{ noMediasMessage }}</span>
    {% endfor %}
</div>