Question

为了便于阅读，我删除了一些标记膨胀。此代码非常适合单击图像并打开div（使用id）。

<script>src="jquery-1.5.2.js"</script>
<style>.toggle {display:none}</style>

<script>
  $(window).load(function(){
    $("a").click(function(){
      var myelement = $(this).attr("href")
      $(myelement).slideToggle("fast");
      $(".toggle:visible").not(myelement).hide();
    });
  });
</script>

<table>
  <tr>
    <td><a href="#box1"><img src="ButtonA.png"/></a></td>
    <td><a href="#box2"><img src="ButtonB.png"/></a></td>
    <td><a href="#box3"><img src="ButtonC.png"/></a></td>
    <td><a href="#box4"><img src="ButtonD.png"/></a></td>
  </tr>
</table>

<div class="toggle" id="box1">Box 1</div>
<div class="toggle" id="box2">Box 2</div>
<div class="toggle" id="box3">Box 3</div>
<div class="toggle" id="box4">Box 4</div>

我想做的就是让一切都按照目前的方式运作，但能够同时打开2个div。

以下是我尝试过但不起作用的例子。

<script>src="jquery-1.5.2.js"</script>
<style>.toggle {display:none}</style>

<script>
  $(window).load(function(){
    $("a").click(function(){
      var myelement = $(this).attr("href")
      $(myelement).slideToggle("fast");
      $(".toggle:visible").not(myelement).hide();
    });
  });
</script>

<table>
  <tr>
    <td><a href="#box1"><img src="ButtonA.png"/></a></td>
    <td><a href="#box2"><img src="ButtonB.png"/></a></td>
    <td><a href="#box3"><img src="ButtonC.png"/></a></td>
    <td><a href="#box4"><img src="ButtonD.png"/></a></td>
  </tr>
</table>

<div class="toggle" id="box1">Box 1</div>
<div class="toggle" id="box1">My New Additional Box</div>
<div class="toggle" id="box2">Box 2</div>
<div class="toggle" id="box3">Box 3</div>
<div class="toggle" id="box4">Box 4</div>

Answer 1

您无法在HTML中复制id。所以最好给class这个特例：

<div class="toggle box" id="box1" class="same-box-1">Box 1</div>
<div class="toggle box" id="box5" class="same-box-1">My New Additional Box</div>

并改变你的<a>：

<a href=".same-box-1" class="same-box"><img src="ButtonA.png"/></a>

在JavaScript中：

$("a").click(function () {
  if ($(this).hasClass("same-box")) {
    $($(this).attr("href")).slideDown();
    return false;
  }
});

注意： 请将jQuery更新到最新或稍微不错的版本（1.9 +）。

更新了工作解决方案

$(document).ready(function () {
  $("a").click(function () {
    if ($(this).hasClass("same-box")) {
      $(".toggle:visible").slideUp();
      $($(this).attr("href")).slideDown();
      return false;
    }
    var myelement = $(this).attr("href");
    $(myelement).slideToggle("fast");
    $(".toggle:visible").not(myelement).slideUp();
  });
});

.toggle { display: none; } 
.same-box-1 { display: none; }
.same-box-2 { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="0" align="center">
  <tbody>
    <tr>
      <td align="center">
        <a href=".same-box-1" class="same-box"><img src="http://goo.gl/wV8dmU" alt=""/></a>
      </td>
      <td><a href="#box2"><img src="http://goo.gl/wV8dmU" alt=""/></a></td>
      <td><a href="#box3"><img src="http://goo.gl/wV8dmU" alt=""/></a></td>
      <td><a href="#box4"><img src="http://goo.gl/wV8dmU" alt=""/></a></td>
    </tr>
  </tbody>
</table>

<div class="same-box-1 toggle" id="box1">Box 1</div>
<div class="same-box-1 toggle" id="box5">My New Additional Box</div>
<div class="same-box-2 toggle" id="box2">Box 2</div>
<div class="same-box-2 toggle" id="box3">Box 3</div>
<div class="same-box-2 toggle" id="box4">Box 4</div>

由于OP甚至不知道如何使用JSBin / JSFiddle / Writing JavaScripts，我已经创建了工作片段，我希望他们可以毫无错误地复制和粘贴。

如何使用一个链接显示/隐藏两个div？

1 个答案: