javascript - 多个切换 ID - 当另一个打开时关闭一个

Question

我有一个包含很多切换框的页面。当一个关闭时，我希望另一个打开。由于设计的布局，一行中有五个超链接，然后是下面的五个隐藏框(所以我为 div 和按钮使用了唯一的 ID)——总共有大约 40 行，所以它很长- 可能有更有效的方法？但是，现在我想关闭一个，当另一个打开时。我试图找到解决方案，但似乎找不到。这是我的 JQuery:

$(window).load(function(){
$( "#button1" ).click(function() {
$( "#item1" ).slideToggle();
});
$( "#button2" ).click(function() {
$( "#item2" ).slideToggle();
});
$( "#button3" ).click(function() {
$( "#item3" ).slideToggle();
});
});

这是我的 HTML:

      <div class="row">
        <div class="onefifth"><a id="button1" href="#"><img src="assets/01.jpg"></a></div>
        <div class="onefifth"><a id="button2" href="#"><img src="assets/02.jpg"></a></div>
        <div class="onefifth"><a id="button3" href="#"><img src="assets/03.jpg"></a></div>
      </div>
      <div id="item1" style="display: none;">
            BOX CONTENT
        </div>
      <div id="item2" style="display: none;">
            BOX CONTENT 2
      </div>
      <div id="item3" style="display: none;">
            BOX CONTENT 3
      </div>

任何帮助将不胜感激!对 JS 很陌生，有点挣扎......

Answer 1

一种可以让您更好地控制元素的好方法是避免使用硬编码 ID 来引用您的按钮，而是使用您已有的父类；我建议你<a>元素使用 href属性来存储您要打开的目标。

要关闭其他元素，您可以 slideUp()所有#item...容器或使用类似 active 的标志类。

$(document).ready(function() {
  $(".onefifth").on('click','a',function() {
    var targ = $(this).attr('href');
    $('[id^="item"]').slideUp();
    $(targ).slideToggle();
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="onefifth">
    <a href="#item1"><img src="assets/01.jpg"></a>
  </div>
  <div class="onefifth">
    <a href="#item2"><img src="assets/02.jpg"></a>
  </div>
  <div class="onefifth">
    <a href="#item3"><img src="assets/03.jpg"></a>
  </div>
</div>
<div id="item1" style="display: none;">
  BOX CONTENT
</div>
<div id="item2" style="display: none;">
  BOX CONTENT 2
</div>
<div id="item3" style="display: none;">
  BOX CONTENT 3
</div>

---

选项 2

如果您可以确定按钮的顺序和容器的顺序匹配，那么您可以通过在没有 ID 的容器上使用通用类来进一步简化这一点。

$(document).ready(function() {
  $(".onefifth").on('click', 'a', function(e) {
    e.preventDefault();
    $('.content').slideUp().eq($(this).parent().index()).slideDown();
  })
});

.content {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="onefifth">
    <a href="#"><img src="assets/01.jpg"></a>
  </div>
  <div class="onefifth">
    <a href="#"><img src="assets/02.jpg"></a>
  </div>
  <div class="onefifth">
    <a href="#"><img src="assets/03.jpg"></a>
  </div>
</div>
<div class="content">
  BOX CONTENT
</div>
<div class="content">
  BOX CONTENT 2
</div>
<div class="content">
  BOX CONTENT 3
</div>