Question

请参阅下面的代码，我想要实现的是，当用户点击“Div 1”时，菜单会打开以选择Web 1，但点击该菜单时，菜单会关闭，iframe会更改。

目前只隐藏菜单或更改iframe，但不能同时使用。

我添加了第二个“Div 2”来显示iframe的更改。

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.2.0.js" integrity="sha256-wPFJNIFlVY49B+CuAIrDr932XSb6Jk3J1M22M3E2ylQ=" crossorigin="anonymous"></script>
  <style>
    .targetDiv {
      display: none;
      background-color: red;
      width: 200px;
      height: 100px;
      display: none;
      position: absolute;
      left: 10px;
      top: 50px;
    }
    
    .iframe {
      bottom: 0px;
      left: 0px;
      position: absolute;
      width: 500px;
      height: 500px;
    }
  </style>
</head>

<body>
  <div>
    <a class="showSingle">Div 1</a>
  </div>
  <div>
    <a class="showSingle">Div 2</a>
  </div>
  <div class="targetDiv">
    <a href="http://www.skysports.com/" class="showSingle" target="myiframe">Web 1</a>
  </div>
  <div class="targetDiv">
    <a href="http://www.bbc.co.uk/news" target="myiframe">Web 2</a>
  </div>

  <iframe src="http://www.bing.com/" name="myiframe" class="iframe"></iframe>
</body>

</html>
<script>
  jQuery(function() {
    jQuery('.showSingle').click(function() {
      var index = $(this).parent().index(),
        newTarget = jQuery('.targetDiv').eq(index);
      jQuery('.targetDiv').not(newTarget).slideUp('fast')
      newTarget.delay('fast').slideToggle('fast')
      return false;
    })
  });;
</script>

Answer 1

你的iframe阻止了你的div，所以我改变了它的风格。

你的“a”标签应该有“showSingle”类。删除后，一切正常。

$(function() {
  $('.showSingle').click(function() {
    var index = $(this).parent().index();
    console.log(index);
    var newTarget = $('.targetDiv').eq(index);
    $('.targetDiv').not(newTarget).slideUp('fast')
    newTarget.delay('fast').slideToggle('fast')
    return false;
  });
  $(".targetDiv a").click(function() {
    $('.targetDiv').slideUp('fast')
  });
});

.targetDiv {
  display: none;
  background-color: red;
  width: 200px;
  height: 100px;
  display: none;
  position: absolute;
  left: 10px;
  top: 50px;
}

.iframe {
  bottom: 0px;
  left: 0px;
  top: 100px;
  position: absolute;
  width: 500px;
  height: 500px;
}

<script src="https://code.jquery.com/jquery-3.2.0.js" integrity="sha256-wPFJNIFlVY49B+CuAIrDr932XSb6Jk3J1M22M3E2ylQ=" crossorigin="anonymous"></script>

<div>
  <div>
    <a class="showSingle">Div 1</a>
  </div>
  <div>
    <a class="showSingle">Div 2</a>
  </div>
</div>
<div class="targetDiv">
  <a href="http://www.skysports.com/" target="myiframe">Web 1</a>
</div>
<div class="targetDiv">
  <a href="http://www.bbc.co.uk/news" target="myiframe">Web 2</a>
</div>

<iframe src="http://www.bing.com/" name="myiframe" class="iframe"></iframe>

更改iframe目标并从一个按钮关闭目标div

1 个答案: