Question

我不会问show/hide click内容$('#BottomDiv').click(function() { $('#UpperDiv').animate({ height: '0px' }, "slow"); });的内容。

我想知道的是如何通过放置2个div，一个放在另一个上面，我可以通过点击底部div获得效果，它“关闭”上面的div。就这样。不完全是手风琴，但这对我的情况来说已经足够了。

我尝试通过在单击底部div后将上部div高度设置为0来实现此目的。它工作但不够顺利。和IE浏览器不喜欢它：

JQUERY

  <div id="UpperDiv" style="height:190px; width:100%; margin-top:80px; position:relative">
  </div>
  <div id="BottomDiv" style="width:100%; position:relative; z-index:10; float:left;" >
  </div>

在标记方面，两个div都是位置相对的：

HTML

{{1}}

所以我只是好奇也许有更好的方法来实现这一点，就像jQuery手风琴那样。流畅，适用于所有浏览器。

Answer 1

假设一个结构如：

<div id="accordionWrapper">
    <div id="UpperDiv" class="accordionSlides">
        <h2>Accordion tab</h2>
        <!-- other content, 'p' elements in the demo -->
    </div>

    <div id="MiddleDiv" class="accordionSlides">
        <h2>Accordion tab</h2>
        <!-- other content, 'p' elements in the demo -->
    </div>

    <div id="BottomDiv" class="accordionSlides">
        <h2>Accordion tab</h2>
        <!-- other content, 'p' elements in the demo -->
    </div>
</div>

然后我建议：

$('#accordionWrapper .accordionSlides').click(
    function(){
        var cur = $(this);
        cur.siblings().children().not('h2').slideUp(); // hides
        cur.find('p').slideToggle(); // shows
    });

JS Fiddle demo

参考文献：

Answer 2

这有帮助吗？

<强>标记：

<div id="UpperDiv" style='background:red;height:200px;'>
</div>
<div id="BottomDiv" style="background:Gray;height:200px;">
</div>

<强>使用Javascript：

$('#BottomDiv').click(function() {    
    $('#UpperDiv').slideUp("slow","linear");
});

Answer 3

$('#BottomDiv').click(function() {    
    $('#UpperDiv').css("display", 'none');
});

上面提供了简单的解决方案，但更优雅的是定义一个css类，例如：

.invisible
{
    display: none;
}

并且您可以通过使用addClass函数使某些东西不可见，并且您可以通过使用标记中的removeClass来删除此类，以使其再次可见。

手风琴是如何工作的？

3 个答案: