使用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

＆＃13;

＆＃13;

.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);
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

我不确定您申请的div的目的是什么。如果我设置display:none iframe中的所有链接都是可点击的。