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

Question

首先我想问一下我如何让我的代码能够在单击a 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 }}

那么我怎样才能做到这一点，而无需通过单击 a href 创建新页面，然后它将转到其受人尊敬的内容？

见下图

---

这是所有循环的结果

---

我想让 a 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>