如何通过Twig读取aria-expanded属性并切换按钮图标？

核心说明 #

Twig是服务端模板引擎，无法直接读取DOM元素的aria-expanded属性（该属性属于客户端DOM范畴）。要实现需求需分两种场景处理：

• 服务端控制状态：将状态变量传入Twig，用变量同步设置aria-expanded和判断图标渲染
• 客户端动态切换：用JavaScript监听状态变化，同步切换图标

场景1：服务端控制状态（纯Twig实现） #

1. 后端将控制展开状态的变量（比如isExpanded）传入Twig模板，值为true或false
2. 在模板中用这个变量同时设置按钮的aria-expanded属性，并判断渲染对应图标

示例代码：

{# 假设后端传入变量isExpanded，值为true/false #}
<button aria-expanded="{{ isExpanded ? 'true' : 'false' }}">
    {% if not isExpanded %}
        {# 渲染折叠状态的图标1 #}
        <svg class="icon-collapse" viewBox="0 0 24 24">
            <path d="M19 9h-4V5h-2v4H5v2h4v4h2v-4h4V9z"/>
        </svg>
    {% else %}
        {# 渲染展开状态的图标2 #}
        <svg class="icon-expand" viewBox="0 0 24 24">
            <path d="M5 15h14v2H5v-2z"/>
        </svg>
    {% endif %}
</button>

也可以用更简洁的三元运算符写法：

<button aria-expanded="{{ isExpanded ? 'true' : 'false' }}">
    {{ isExpanded 
        ? include('icons/expand-icon.html.twig') 
        : include('icons/collapse-icon.html.twig') 
    }}
</button>

场景2：客户端动态切换（Twig+JS结合） #

如果aria-expanded是通过JavaScript动态切换的（比如点击按钮切换折叠/展开），Twig无法感知客户端状态变化，需要用JS同步处理图标切换：

1. 先在Twig中渲染两个图标，初始状态根据默认的aria-expanded值控制显示：

<button aria-expanded="false">
    <svg class="icon-collapse" viewBox="0 0 24 24" style="display: block;">
        <path d="M19 9h-4V5h-2v4H5v2h4v4h2v-4h4V9z"/>
    </svg>
    <svg class="icon-expand" viewBox="0 0 24 24" style="display: none;">
        <path d="M5 15h14v2H5v-2z"/>
    </svg>
</button>

2. 添加JavaScript监听按钮点击，同步切换aria-expanded和图标显示：

const toggleBtn = document.querySelector('button[aria-expanded]');

toggleBtn.addEventListener('click', () => {
    // 获取当前状态
    const currentState = toggleBtn.getAttribute('aria-expanded') === 'true';
    // 切换aria-expanded属性
    toggleBtn.setAttribute('aria-expanded', !currentState);
    // 切换图标显示
    const collapseIcon = toggleBtn.querySelector('.icon-collapse');
    const expandIcon = toggleBtn.querySelector('.icon-expand');
    
    collapseIcon.style.display = currentState ? 'block' : 'none';
    expandIcon.style.display = currentState ? 'none' : 'block';
});

内容的提问来源于stack exchange，提问作者Jakub Bokwa