在单击幻灯片上切换多个隐藏的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>

s

    $(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（content）
  
• 如果另一个div的隐藏内容已经打开，请使用slideUp将其关闭，然后打开您单击的内容（仅在slideUp动画完成后打开）
  
  我设法通过两个隐藏的div获得了预期的效果示例1
  但是有三个我有这个示例2自动切换问题
  
  救命！ 如果有更好更好的替代方法可以达到这种效果，请提出建议。
  PS对不起，我的英语不好。

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> 

Answer 2

您可以使用如下形式：

 $('div[id^=content]').click(function () {
      var name = $(this).attr('id');
      $('div[class^=content]:visible').slideUp('slow', function() {
           $('.' + name).slideDown('slow');
      });  
 });

希望对您有所帮助。 :-)。