使用 iframe 导致链接失效

Question

我有一个侧边导航栏，每次点击侧边栏时都会切换为隐藏和显示（包含列表链接）。还有一个 iframe，我在其中显示一个网站。当我点击一个链接时，它会隐藏侧边栏并将其重定向到 iframe 区域内的相应 url。问题在于，当我在 iframe 中显示某些网站时，重定向网站的链接将仅在 iframe 的上半部分有效，而在 iframe 的剩余半部分链接被禁用。当我在 iframe 内滚动时，即当下半部分的链接到达顶部时，链接被启用。需要帮忙。

.menu_sample {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 100px;
      border: solid 1px;
      transition: transform 0.1s ease-out;
    }

    .content {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      padding: 10px;
      transition: left 1s ease-out;
      margin-left: -1.5%;
      margin-top: 150%;
    }

    /*transition*/
    .top_mar {
        margin-top: 25%;
    }

    /* on toggle*/
    .content.pushed {
      left: 225px;
    }

    .hide {
      transform:translateX( -100px);
    }

<div class="menu_sample top_mar">
  <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
        <li><span style="color:blue; font-weight:bold;">Dashboards</span></li>
         {% for Dashboard in dashboards %}
<li><a href="{{ Dashboard.d_url }}">{{ Dashboard.d_name }}</a></li>
           {% endfor %}
          </ul>

        </div>

    </div>
    <div class="content pushed top_mar">
      <button onclick="toggleMenu()"><span id="menu-button"><span class="glyphicon glyphicon-chevron-left" id="glymphi" style="margin-left:24%;"></span></span></button>
</div>

<div style="margin-left:-1%; margin-top:3.5%; height: 625px;" >
<iframe width="100%"  height="95%" name="iframe_a" frameborder="0"></iframe>
</div>

Answer 1

.menu_sample {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 100px;
      border: solid 1px;
      transition: transform 0.1s ease-out;
    }

    .content {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      padding: 10px;
      transition: left 1s ease-out;
      margin-left: -1.5%;
      margin-top: 150%;
    }

    /*transition*/
    .top_mar {
        margin-top: 25%;
    }

    /* on toggle*/
    .content.pushed {
      left: 225px;
    }

    .hide {
      transform:translateX( -100px);
    }

<div class="menu_sample top_mar">
  <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
        <li><span style="color:blue; font-weight:bold;">Dashboards</span></li>
         
<li><a href="#">Link</a></li>
           <li><a href="#">Link</a></li><li><a href="#">Link</a></li>
          </ul>

        </div>

    </div>
    <div class="content pushed top_mar" style="display:none">
      <button onclick="toggleMenu()"><span id="menu-button"><span class="glyphicon glyphicon-chevron-left" id="glymphi" style="margin-left:24%;"></span></span></button>
</div>

<div style="margin-left:-1%; margin-top:3.5%; height: 625px;" >
<iframe width="100%"  height="95%" name="iframe_a" frameborder="0" src="http://en.wikipedia.org/wiki/Help:Link"></iframe>
</div>

您的主要问题是<div class="content pushed top_mar">。请检查随附的屏幕截图。此 div 与您的 iframe 重叠，这就是链接在该区域不起作用的原因。 div 上方的链接作为上部分不被 div 覆盖。

我不确定 div 对您的应用程序的用途是什么。如果我设置display:none iframe 内的所有链接都是可点击的。