如果 div 中没有内容，则隐藏导航链接答案

【问题标题】：Hide nav link if no content is in div如果 div 中没有内容，则隐藏导航链接
【发布时间】：2021-05-20 10:33:49
【问题描述】：

我有一个推荐部分，它将从 Google 工作表中填充，我想隐藏导航链接，直到有推荐显示。我正在使用 SheetsDB 链接 Google 表格并提取该内容。

我正在使用基本的 Bootstrap 导航：

<div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="<?php echo esc_url(home_url('/')); ?>">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="<?php echo esc_url(site_url('/#whyus')); ?>">Why Choose Us</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="<?php echo esc_url(site_url('/#ourservices')); ?>">Our Services</a>
                  </li>
                    <li class="nav-item">
                    <a class="nav-link" href="<?php echo esc_url(site_url('/#testimonials')); ?>">Testimonials</a>
                  </li>
                </ul>
              </div>

以及用于推荐的基本 Bootstrap 列：

<div class="container">
        <div class="row">
            <div class="col-12">
                <h1><?php echo $testimonial_title; ?></h1>
            </div>
            <div class="col-md-4">
                <p><?php echo $testimonial_1; ?></p>
                <p><?php echo $testimonial_name_1; ?></p>
            </div>
            <div class="col-md-4">
                <p><?php echo $testimonial_2; ?></p>
                <p><?php echo $testimonial_name_2; ?></p>
            </div>
            <div class="col-md-4">
                <p><?php echo $testimonial_3; ?></p>
                <p><?php echo $testimonial_name_3; ?></p>
            </div>
        </div>
    </div>

是否可以在该部分显示内容之前隐藏推荐链接？

谢谢

克雷格

【问题讨论】：

标签： javascript php wordpress

【解决方案1】：

您可以使用 onload 方法获取从 google sheet 中提取的链接。

//initially hide
document.getElementById("navbarNav").style.display = "none";

//display if conent loaded from link
document.getElementById("linkid").addEventListener("load", navShowOnLoadTestimonials);
function navShowOnLoadTestimonials() {
    document.getElementById("navbarNav").style.display = "block";
}

另一种方法是使用 setTimeout 在一段时间后显示导航链接。

document.getElementById("navbarNav").style.display = "none";
setTimeout(function(){ document.getElementById("navbarNav").style.display = "block"; }, 3000);

【讨论】：