2

我不是在问如何show/hide满足click。

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

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

查询

$('#BottomDiv').click(function() {    
    $('#UpperDiv').animate({ height: '0px' }, "slow");
});

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

HTML

  <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>

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

4

3 回答 3

2

假设结构如下：

<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 小提琴演示。

参考：

于 2012-05-30T17:55:44.477 回答
1

这有帮助吗？

标记：

<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");
});
于 2012-05-30T17:50:14.677 回答
0 
$('#BottomDiv').click(function() {    
    $('#UpperDiv').css("display", 'none');
});

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

.invisible
{
    display: none;
}

并且您可以使用 addClass 函数使某些内容不可见，并且您可以使用标签中的 removeClass 删除此类以使其再次可见。

于 2012-05-30T17:12:55.893 回答