Javascript：使隐藏元素可见时遇到困难

Question

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

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

问题是，当我关闭它时，网站应该像第一张图片一样，但3图片不会再出现在$（＆＃34; class＆＃34;）。css（＆＃34;能见度＆＃34;，＆＃34;可见＆＃34;）。 我不知道为什么。

代码（有一些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>

＆＃39 ;;

$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上的click事件来增加min-height。如果你保持第二个div的z-index高于第一个div的z-index，它将显示为高于它。要关闭它，请附加一个重置min-height：0;的click事件。添加过渡：min-height .4s easy;到你的第二个div，你的效果很好！

Answer 2

这是因为当你通过'$'获取元素时，它将返回一个jQuery对象（一个类似数组的对象），即使只有一个元素与条件兼容，你可以使用console.log($(".team-member"))来查看你有什么。

在这种情况下，只需修改

即可

$(".team-member").style.visibility = "visible";
到
$(".team-member").css("visibility", "visible");
或
$(".team-member")[0].style.visibility = "visible";

Answer 3

我尝试使用z-index我也尝试了所有解决方案Rex，但没有任何效果。我真的不知道为什么它可能会＆＃39;在我的HTML代码的结构中。我拍了一张照片：

avocat_container是我们点击照片时出现的div。而团队成员就是消失以使avocat_container出现的人。

编辑：它类似于＆＃34;。团队成员＆＃34; .css（＆＃34;可见性＆＃34;，＆＃34;可见＆＃34;）未被考虑在内javascript。