删除 HTML 标记的内联样式元素

Question

我想在我的 Wordpress 菜单中添加一点菜单悬停动画：

https://www.littlesnippets.net/blog/some-css-menu-inspiration-using-animated-lines

我的 Wordpress 主题 (Avada) 以某种方式将内联 html 样式写入标签：

 <ul id="menu-menu" class="fusion-menu"> <li ><a href="#Home" data-hover="Home" **style="overflow: hidden; height: 100px;**"><span class="menu- text">Home</span></a></li> <li ><a href="#Events" data-hover="Events" **style="overflow: hidden; height: 100px;**"><span class="menu-text">Events</span></a></li> </ul>

...

我将这段代码添加到我的 functions.php 中：

add_filter( 'the_content', 'the_content_filter', 20 );

function the_content_filter( $content ) {
    $content = preg_replace('#<a.*?>(.*?)</a>#i', '<a>\1</a>', $content);
    return $content;
}

但这会删除我页面上过多的样式元素。 如何调整功能，只删除 class.fusion-menu 中的内联样式标签？

谢谢你的帮助！

Answer 1

$('ul#menu-menu li').attr('style', function(i, style)
{
    return style && style.replace(/display[^;]+;?/g, '');
});

请检查上面的代码，它将用 jQuery 删除

Answer 2

我已经尝试过使用 jQuery，但这行不通，因为我认为该函数必须准确指向标签。

内联样式来自融合生成器模板，但我不知道这个函数在哪个 php 文件中。

我最喜欢的方法是当有人可以使用 preg_replace 完成我的功能时，目标是选择器 class.fusion-menu 中的所有元素

谢谢...