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/

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

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

1 个答案: