Javascript：使隐藏元素可见的困难

我对jQuery的css操作有一些问题。 这是我需要做的。 我有这三张照片。每个都是一个人的代表

单击其中一个按钮时，将显示以下div：

问题是当我关闭它时，网站应该与第一张图片一样，但是第三张图片不会以$（“class”）.css（“可见性”、“可见”）重新出现。 我不知道为什么

代码（有一些PHP，是用Wordpress完成的）： 这是第一张图片的代码（我会保持简短，这不相关）：

---

我会用最小高度来做这个，你也会得到一个很好的向下滑动的过渡。基本思想是将第二个div设置为最小高度：0；，然后在JQuery中，在另一个div上使用click事件来增加最小高度。如果您保持第二个div的z索引高于第一个div，则它将显示在其上方。若要关闭它，请附加一个重置最小高度的单击事件：0；。添加过渡：最小高度。4s轻松；到你的第二个div，你有一个很好的小效果

这是因为当您通过“$”获取元素时，它将返回一个jQuery对象（类似数组的对象），即使只有一个元素与该条件兼容，您也可以使用

console.log（$（“.team member”）

查看您拥有的内容

在这种情况下，只需修改

$（“.team member”）.style.visibility=“visible”

到

$（“.team member”）.css（“可见性”、“可见”）

或

$（“.team member”）[0].style.visibility=“visible”
不要更改可见性，只需更改z索引；）
 <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.'">';

$(".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;
});
});