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>

Answer 2

为所有div添加一个类，如下所示：

  <div class="contentBox" id="item1" style="display: none;">
        BOX CONTENT
    </div>
  <div class="contentBox" id="item2" style="display: none;">
        BOX CONTENT 2
  </div>
  <div class="contentBox" id="item3" style="display: none;">
        BOX CONTENT 3
  </div>

然后你可以在打开新的之前关闭所有这些

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

function closeOpenContent(){
     $(".contentBox:visible").slideToggle();
}

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

2 个答案:

选项2