Elementor页面构建器中切换激活时如何修改标题

我有一个Elementor的Toggle切换组件，它的两种状态代码如下：

非激活状态 #

<div id="elementor-tab-title-1971" class="elementor-tab-title" data-tab="1" role="tab" aria-controls="elementor-tab-content-1971" aria-expanded="false" tabindex="-1" aria-selected="false"><a href="" class="elementor-toggle-title">Lees meer</a></div>

激活状态 #

<div id="elementor-tab-title-1971" class="elementor-tab-title elementor-active" data-tab="1" role="tab" aria-controls="elementor-tab-content-1971" aria-expanded="true" tabindex="0" aria-selected="true">
    <a href="" class="elementor-toggle-title">Read Less</a>
</div>

我希望在Toggle组件激活时修改它的标题文本，尝试用jQuery实现但没成功，求可行的解决方案。

下面提供几种可靠的实现方式，你可以根据实际场景选择：

方式一：监听Elementor内置切换事件 #

Elementor的Toggle组件会触发专属的切换事件，直接监听这些事件来修改标题最稳妥：

// 监听Toggle展开事件
jQuery(document).on('elementor/toggle/open', function(event, id) {
    if (id === 'elementor-tab-title-1971') {
        jQuery('#elementor-tab-title-1971 .elementor-toggle-title').text('Read Less');
    }
});

// 监听Toggle收起事件
jQuery(document).on('elementor/toggle/close', function(event, id) {
    if (id === 'elementor-tab-title-1971') {
        jQuery('#elementor-tab-title-1971 .elementor-toggle-title').text('Lees meer');
    }
});

方式二：监听点击事件并判断状态 #

如果内置事件不好用，直接监听Toggle标题的点击事件，根据当前类名判断状态切换文本：

jQuery('#elementor-tab-title-1971').on('click', function() {
    var $titleLink = jQuery(this).find('.elementor-toggle-title');
    if (jQuery(this).hasClass('elementor-active')) {
        $titleLink.text('Lees meer');
    } else {
        $titleLink.text('Read Less');
    }
});

方式三：监听类名变化（兼容脚本触发的状态切换） #

如果Toggle状态可能通过其他脚本触发，用MutationObserver监听类名变化来响应：

var target = document.getElementById('elementor-tab-title-1971');
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
            var $target = jQuery(target);
            var $titleLink = $target.find('.elementor-toggle-title');
            $titleLink.text($target.hasClass('elementor-active') ? 'Read Less' : 'Lees meer');
        }
    });
});

observer.observe(target, { attributes: true });

注意事项 #

• 所有代码要放在DOM加载完成后执行，包裹在jQuery(document).ready()里：

jQuery(document).ready(function() {
    // 上面的任意一种实现代码放在这里
});

• 如果有多个Toggle组件，可把ID选择器换成.elementor-tab-title，再通过data-tab属性区分不同组件。

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