Javascript : difficulties when making a hidden element visible

Question

我在使用 jQuery 进行 CSS 操作时遇到了一些问题。 这是我需要做的。 我有这三张图。每一个都是一个人的代表。

当我们点击其中一个时，会出现这个 div:

问题是当我关闭它时，网站应该变成第一张图片，但是第三张图片不会重新出现 $("class").css("visibility", "visible")。 我不知道为什么。

代码(有一些PHP，它是用Wordpress完成的): 这是第一张图片的代码(我会保持简短，它不相关):

 <div class="team-member" style="position:relative; visibility:visible; z-index:-200;"data-style="'.$team_memeber_style.'">
 <img class="img_avocat" alt="'.$name.'" src="' . $image_url .'" title="' . $name . '" /></div>

这是第二张图片的代码:

$html .= '<div class="team-member-container" style="position:relative;z-index:-200">';
$html .= '<div class="avocat_container ' .$i. '"  height="400px" style="width:1250px; height:442px;border:2px solid black;z-index:200;position:absolute;top:-5%;">
<div style="width:400px; display:inline; position:relative; z-index:200" class="photo_container"><img class="img_avocat_cont" style="display:inline; padding-top:23px" width="400px" height="200px" alt="'.$name.'" src="' . $image_url .'" title="' . $name . '" /></div>
<div style="display:inline-block; vertical-align:top;z-index:200; margin-left: 50px;position:relative;padding-top:23px;" class="container_description">
<h3 style="display:block;z-index:200; color:#f5a982;position:relative;">' . $name . '</h3>
<p style="display:block;z-index:200;position:relative;">' . $job_position . '</p>
<p style="display:block;z-index:200;position:relative;">DESCRIPTION</p>
<h4 style="display:block;z-index:200; color:#f18c58;position:relative;">FORMATION</h4>
<h4 style="display:block;z-index:200; color:#f18c58;position:relative;">Expertise</h4>
</div>
<div style="display:inline;" class="avocat_close"><img style="display:inline;float: right;padding-top: 20px; padding-right:20px;" src="http://scmlibravocats.lagencecocoa.com/wp-content/uploads/2015/11/croix_fermeture.png" /></div>
<div style="display:inline; margin-left:28%;" class="avocat_mail"><img style="display:inline;padding-right:10px;"src="http://scmlibravocats.lagencecocoa.com/wp-content/uploads/2015/11/mail.png" />Envoyer un message</div>

';

$html .= '<div class="testo team-member" style="position:relative; visibility:visible; z-index:-200;"data-style="'.$team_memeber_style.'">';

Jquery 代码:

$(".avocat_container").hide();
var on = 0;
$(".team-member-container").click(function () {
    if (on == 0) {
        $(this).find(".avocat_container").fadeIn("slow");
        $(".team-member").css("visibility", "hidden");
        on = 1;
    }
});
$(".photo_container").click(function() {

    $(".avocat_container").fadeOut("slow");
    $(".avocat_container").css("visibility", "hidden");
            $(".testo").fadeIn("slow");
    $(".team-member").style.visibility = "visible";
    on = 0;
});
});

Answer 1

我实际上会为此使用 min-height，并且您还会得到一个很好的向下滑动过渡。基本思想是将第二个 div 设置为 min-height:0;，然后在 JQuery 中使用另一个 div 上的单击事件来增加最小高度。如果你保持第二个 div 的 z-index 高于第一个，它会出现在它之上。要关闭它，请附加一个重置 min-height:0; 的点击事件。添加 transition:min-height .4s ease;到你的第二个 div，你得到了一个不错的小效果!