2

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

该问题的图像如下所示：

由 Wordpress 的 Divi 主题自动生成的锚标签

另一个由 Wordpress 的 Divi 主题自动生成的锚标签

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

图像显示在 Wordpress 外观 > 菜单界面中创建的菜单作为自定义链接

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

我试过的

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>
4

1 回答 1

0

我不确定什么时候调用下面的函数......它可能会在......onload之后有点setTimeout()......setInterval()可能吗？。

function removeEmptyAnchorsFromDiviMobile(){

  // Get ALL anchors in page
  let allAnchors = document.QuerySelectorAll("a")

  // Loop them
  allAnchors.forEach(function(anchor){

    // If the anchor has no child
    if(!anchor.hasChildNodes()){
      anchor.remove()
    }
  })

}
于 2021-01-22T21:24:43.283 回答