在这种情况下如何用jQuery实现切换效果

How to achieve toggle effect with jQuery in this situation?

本文关键字：实现 jQuery 这种情况下 何用      更新时间：2023-09-26

找到一个例子，这正是我想要的。请将窗口大小调整为700px, url为http://www.subway.com.au

感谢您的阅读。

我的布局如下:

<div id="left">
  <div id="left-container" style="display:none;">Content foo
  </div>
</div>
<div id="right">
  <div id="right-container" style="display:none;">Content bar
  </div>
</div>
<div class="overlay"></div>

基本上，当点击#left或#right时，相对而言，#left-container或#right-container会向上或向下滑动，同时。overlay会显示或隐藏。当然，当容器是向上滑动时，点击整个屏幕而不是其本身会向下滑动和removeClass .overlay.

我知道这个问题已经被提过很多次了。然而，它似乎仍然不适合我。感谢您的宝贵时间。

我将使用稍微不同的HTML - 

<div id="left" class="header">
    A
  <div class="container">Content foo
  </div>
</div>
<div id="right" class="header">
    B
  <div class="container">Content bar
  </div>
</div>
<div class="overlay"></div>

和JS - 

$(function(){
    $(".header").on("click", function(){
        if($(this).find(".container").is(":visible")){
            $(".header").find(".container").each(function(){
                 $(this).slideDown();
            });
            $(this).find(".container").slideUp();
            $(".overlay").show();
        }else{            
            $(this).find(".container").slideDown();
            $(".overlay").hide();
        }
    });
});

这里是小提琴- http://jsfiddle.net/n8ykqLuy/1/

注意:一开始我以为你的要求是自定义的。但是我想你要找的是手风琴

相关文章：