仅当页面上有某个元素时才显示某些 <div>

Question

我正在尝试使用 Zendesk 建立我在帮助中心的公司。

我已经设法实现了一个侧导航，但我很难让它根据用户所在的帮助中心的类别显示不同的锚链接。 Zendesk 只允许您编辑类别页面模板的 HTML，我无法在链接中动态加载。

谁能告诉我如何显示DIV_1，只有当页面包含<li title="Using ProductName">？我已经搜索过，但似乎找不到任何相关内容。

从那里我将以相同的方式对其他部分执行相同的操作（例如，如果页面包含 <li title="Developer Portal"，则仅显示 DIV_2。

作为参考，我可以访问该类别的 HTML 模板、CSS 和 JS。

提前致谢！

<div class="container">
  <nav class="sub-nav">
    <ol class="breadcrumbs">
  
    <li title="Help Centre">
      
        <a href="/hc/en-us?preview%5Btheme_id%5D=209312965&amp;preview_as_role=manager&amp;use_theme_settings=false">Help Centre</a>
      
    </li>
  
    <li title="Using ProductName">
      
        Using ProductName
      
    </li>
  
</ol>

    
    <div id="DIV_1">
    <ul id="UL_2">
        <li id="LI_1">
            <a href="#uniqueID0" id="A_1">Admin and Settings</a>
        </li>
    <li id="LI_1">
            <a href="#uniqueID1" id="A_1">Getting Started</a>
        </li>
        <li id="LI_1">
            <a href="#uniqueID2" id="A_1">Content Types and Sources</a>
        </li>
    <li id="LI_1">
            <a href="#uniqueID3" id="A_1">Content Management</a>
        </li>
     <li id="LI_1">
            <a href="#uniqueID4" id="A_1">Content Publishing</a>
        </li>
        <li id="LI_1">
            <a href="#uniqueID5" id="A_1">Apps</a>
        </li>
    <li id="LI_1">
            <a href="#uniqueID6" id="A_1">Analytics</a>
        </li>
        <li id="LI_1">
            <a href="#uniqueID7" id="A_1">Troubleshooting</a>
        </li>
    </ul>
</div>
  </div>
</div>

Answer 1

您可以使用内置的 DOM 查询方法来完成此操作。在这种情况下，您需要将 if 条件与查询结合起来，如下所示：

if (document.querySelector('li[title="Using ProductName"]')) {
    // make #DIV_1 visible however you please here
    document.querySelector('#DIV_1').display = 'block';
}

如果标题为Using ProductName 的li 不存在，#DIV_1 将保持不可见；如果有，就会显示出来。

Answer 2

您可以快速进行for 循环检查：

var items = document.getElementsByTagName('li');
for (var i = 0; i < items.length; i++) {
  if (items[i].title == titleToCheckFor) { showElement(); }
}

您可以在titleToCheckFor 中填写您要查找的标题（“使用_____”），showElement 函数将显示div，或者您可以只在循环中显示div .

Answer 3

使用 DOM 查询方法 querySelector 可以搜索目标元素，默认我们将所有 div 设置为隐藏，然后只显示需要的。

<style>
   .module {
      display:none;
   }
</style>
<script>
   // by default we show MODULE A else show module B
   var module = "DIV_1"; 
   if (document.querySelector('li[title="Developer Portal"]')) { 
      module = "DIV_2"; 
   }
   // we show the respective DIV
   document.querySelector('.' + module).display = 'block'; 
</script>

<div class="module DIV_1" id="DIV_1">
 ...  
</div>  
<div class="module DIV_2" id="DIV_2">
....
</div> 

Answer 4

您可以通过 CSS 类实现这一点。

解决方案 1：

这是示例 HTML：

<div id="Div_1" class="menu-div using-productname">
</div>
<div id="Div_2" class="menu-div help-centre">
</div>
<div id="Div_3" class="menu-div other-tab">
</div>

现在你应该像这样设置你的 CSS：

.menu-div {
   display: none;
}

所以当页面加载时所有的菜单 div 默认是隐藏的

现在，当您转到某个选项卡假设“使用 ProductName”时，您需要做的就是

var title = "Using ProductName"; //Get the title
var className = title.split(" ").join("-").toLowerCase(); //Convert it to the correct class which matches with your Divs in the menu
document.querySelector(".menu-div").style.display = "none";  //Set all menu divs to hidden
document.querySelector("." + className).style.display = "block";  //Show the desired menu div

解决方案 2：

这是示例 HTML：

<div class="parent-div">
<div id="Div_1" class="menu-div">
</div>
<div id="Div_2" class="menu-div">
</div>
<div id="Div_3" class="menu-div">
</div>

现在你应该像这样设置你的 CSS：

.parent-div .menu-div {
   display: none;
}
.parent-div.using-productname #Div_1 {
   display: block;
}
.parent-div.help-centre #Div_2 {
   display: block;
}
.parent-div.other-tab #Div_3 {
   display: block;
}

现在，当您转到某个选项卡假设“使用 ProductName”时，您需要做的就是

var title = "Using ProductName"; //Get the title
var className = title.split(" ").join("-").toLowerCase(); //Convert it to the correct class which you will add to the parent
document.querySelector(".parent-div").className = "parent-div " + className;   //Set the parent div class to the className - the css will take care of the rest!

注意 - 您还应该在不同的 LI 和 A 标签上使用不同的 id。

Answer 5

您可以在 Zendesk 帮助中心中使用 jQuery

var test =  $('.breadcrumbs').children(':contains(amy)')
if(test.length > 0) {
   do something here like 
   $('#LI_1').hide();
}

这是一种简单的蛮力，但它确实有效。