从 DiviWP 主题中删除移动菜单中自动生成的 <a>

如何解决从 DiviWP 主题中删除移动菜单中自动生成的 <a>

我在尝试为客户的网站删除移动菜单中一些自动生成的锚标记时遇到问题。暂时我让它们用 CSS“掩盖”和“隐藏”，但这是一个迟钝的解决方案，我想要一些最终更精致的东西。我在 wordpress 中使用 Divi 主题。

问题图片如下所示：

这是一个问题，因为我希望只有一行用于社交链接，另一行用于立即调用按钮，以使其外观漂亮流畅（容器 div 具有 CSS 属性 x-overflow:auto; 和子元素 (container_div li a) 具有 CSS 属性 display:inline; 然后最后调用 Now 按钮设置为 display:block; 将其放在下一行）。很明显，这些神秘的锚元素正在迫使一切不对齐。这些菜单项只是通过 WP 管理 UI 中的外观 > 菜单中的自定义链接构建的。

很明显，我的代码中没有空的锚标记（我将在底部发布）。

我的尝试

Javascript

这种类型的脚本：

<script type="text/JavaScript">
//script here
var menuButton = document.getElementById("strategos-menu-button");
//call function here,see below

function removeEmptyAnchorsFromDiviMobile(){
    var strategosFirst = document.getElementById("menu-item-528"); //CSS ID generated by Divi for the 
    menu's 'li a'

    var strategosSecond = document.getElementById("row-cta-strategos"); //CSS ID of my own making

    strategosFirst.removeChild(strategosFirst.childNodes[0]);
    strategosFirst.removeChild(strategosSecond.childNodes[0]);
}
</script>

有两种调用函数的方式：

var menuButton = document.getElementById("strategos-menu-button");
menuButton.addEventListener("click",removeEmptyAnchorsFromDiviMobile);
//where 'menuButton' is the "hamburger icon" from the mobile menu module pre-built into the Divi 
theme with a CSS ID assigned to it within the page builder's interface

和

window.onload = removeEmptyAnchorsFromDiviMobile;
//where this object.onload has been placed either directly on the page in a couple different places 
or in the <head>

这两种方法都没有奏效。

接下来（实际上是第一次），我尝试了一些 CSS。

CSS

#menu-item-528::after{
    content:none !important;
    /*also tried*/
    display:none !important;
}

对以下 #row-cta-strategos 做了同样的事情，但两种方法都不起作用。

PHP

TBH 我还没有在我的子主题的文件结构中尝试过任何东西，因为我对 WP 文件结构不是很熟悉，而且手头有比在这个小问题上花费数小时更紧迫的事情......所以如果解决方案在于修改文件结构中的某些功能，在我花几个小时在空闲时间浏览文件之前，我会非常感激:)

正如所承诺的，这是菜单的 HTML。谢谢！

<div class="row-cta-strategos">
    <a href="https://www.facebook.com/mycustomer" target="_blank" id= "strategos- facebook" class="header-social-call" rel="opener"><i class="fab fa-facebook-f"></i></a>

    <a href="https://www.linkedin.com/company/mycustomer/about/" target="_blank" id="strategos-linkedin" class="header-social-call" rel="opener"><i class="fab fa-linkedin-in"></i></a>

    <a href="https://www.youtube.com/channel/companystring" target="_blank" id ="strategos-youtube" class="header-social-call" rel="opener"><i class="fab fa-youtube"></i></a>

    <a href="tel:+15555551234" class="header-social-call" id="call-strategos"><i class="fas fa-phone-square-alt"></i>
    <span id="header-call-txt-strategos">Call Now: (555) 555-1234</span>
</a>
</div>

解决方法

我不确定何时调用下面的函数......它可能是onload之后的{{1} }...在setTimeout()上也许？。

setInterval()