Question

我有一个包含小按钮的页面（更多只有2个）用于配置文件。除了隐藏和显示（slideToggle）之外，所有的工作都或多或少都很好 - 我的div（profilePannel）看起来没有很好的慢扩展，只是突然出现。

只有css元素（margin-bottom）正常工作。要查看它，您可以单击配置文件1，然后在第二个按钮上查看最终效果。

的jQuery

var menu;
$(document).ready(function(){
    $('.img').click(function () {
        menu = $("#" + $(this).data("menu"));
        $(".profilePannel:not(#" + menu.attr("id") + ")").slideUp("slow");
        menu.slideToggle("slow");
    });
})

Try it!

任何人都可以这么好，告诉我为什么，以及我如何改变它？

顺便说一句，我在定位我的profilePanel时遇到了麻烦 - 我希望在每个配置文件按钮下面显示它，而不移动其余的按钮。我尝试过使用position：relative，absolute，还有z-index，但是我错过了一些东西而且没有我想要的输出。

Answer 1

似乎是你的min-height导致了你的问题。如果您删除/更改它，您将获得您想要的效果：

.profilePannel {
    width: 300px;
    height: 150px;
    border: 1px solid #000;
    background: silver;
    filter:alpha(opacity=75);
    opacity: 0.75;
    -moz-opacity:0.75;
    position: relative;
    z-index: 2;
    display: none;
    margin-bottom: 15px;
}

另外，你可以更好地写

$(".profilePannel:not(#" + menu.attr("id") + ")").slideUp("slow");

如：

$(".profilePannel").not(menu).slideUp("slow");

JSFiddle

如果你真的想使用min-height，你需要提出一个替代方案 - 或者只是将它放在一个容器中并在其上设置min-height：

JSFiddle

Answer 2

这里所有人都正确地工作，包括绝对的po 试试this

JavaScript代码：

var menu;
$(document).ready(function(){
    $('.profilePannel').each(function(obj){
        $(this).height( $(this).height() );
        $(this).css('min-height', 0);
    })

    $('.img').click(function () {
            menu = $("#" + $(this).data("menu"));

            menu.slideDown().siblings('.profilePannel').slideUp();


        });

})

幻灯片（动画）无法正常工作

2 个答案: