javascript - 单击幻灯片时切换多个隐藏的 div

Question

我有什么:

HTML

<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>

<div class="content1" style="display:none"></div>
<div class="content2" style="display:none"></div>
<div class="content3" style="display:none"></div>

JS

    $(document).ready(function() {
      $('#content1').click(function() {
        $(' .content2, .content3 ').slideUp({
          style: "height",
          speed: "slow",
          complete: function() {
            $(' .content1').slideToggle("slow")
          }
        });
      });
      $('#content2').click(function() {
        $(' .content1, .content3 ').slideUp({
          style: "height",
          speed: "slow",
          complete: function() {
            $(' .content2').slideToggle("slow")
          }
        });
      });
                $('#content3').click(function() {
        $(' .content1, .content2 ').slideUp({
          style: "height",
          speed: "slow",
          complete: function() {
            $(' .content3').slideToggle("slow")
          }
        });
      });
    });

我想要什么

• 点击 div 后，使用 slideToggle 显示其隐藏的 div(内容)
  
• 如果另一个div的隐藏内容已经打开，则使用slideUp将其关闭并打开您单击的内容(仅在slideUp动画完成后才打开)
  
  我设法用两个隐藏的div Sample 1 获得了预期的效果
  但是有了三个我就有了这个Sample 2自动切换问题
  
  帮助!如果有更好、更简单的替代方案来达到这种效果，请提出建议。
  抱歉我的英语很蹩脚。

Answer 1

您的代码可以使用通用类进行重构，然后使用带有 promise().done() 回调的以下逻辑，该回调对于所有集合仅调用一次:

$(document).ready(function() {
  $('.for_content').click(function() {
    var i = $(this).index('.for_content');
    $('.content:not(:eq(' + i + '))').slideUp({
      style: "height",
      speed: "slow"
    }).promise().done(function() {
      $('.content').eq(i).slideToggle("slow")
    });
  });
});

* {
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #222;
}
li {
  float: left;
}
.link {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 10px;
  margin-left: 10px;
  margin-right: 10px;
  text-decoration: none;
  cursor: pointer;
}
.link:hover {
  text-shadow: 0px 1px 10px #fff;
}
.content1 {
  height: 400px;
  width: 100%;
  top: 0;
  background-color: #333;
}
.content2 {
  height: 400px;
  width: 100%;
  top: 0;
  background-color: #444;
}
.content3 {
  height: 400px;
  width: 100%;
  top: 0;
  background-color: #555;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <ul>
    <li>
      <a href="#"><span class="link">Home</span></a>
    </li>
    <li>
      <div class="link for_content" id="content1">Link 1</div>
    </li>
    <li>
      <div class="link for_content" id="content2">Link 2</div>
    </li>
    <li>
      <div class="link for_content" id="content3">Link 3</div>
    </li>
  </ul>
</div>
<div>
  <div class="content content1" style="display: none">
    <h1>
        CONTENT 1
        </h1>
  </div>
  <div class="content content2" style="display: none">
    <h1>
        CONTENT 2
        </h1>
  </div>
  <div class="content content3" style="display: none">
    <h1>
        CONTENT 3
        </h1>
  </div>
</div>