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

Question

找到了一个我想要的例子。 请调整您的窗口大小至少700px，网址为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将会slideUp或slideDown，同时.overlay将被显示或隐藏。 当然，当容器为slideUp时，单击所有屏幕而不是单击其本身将是slideDown和removeClass .overlay。

我知道这个问题已经提出很多次了。 但是，它似乎仍然对我不起作用。 谢谢你的时间。

Answer 1

我会为此使用一些不同的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/

注意：起初我认为您的要求是自定义的。 但是我认为您正在寻找的是手风琴。