Question

我接管了另一位开发人员的代码。有一个小图像和注释框，可以简要显示页面加载的时间然后消失。它应该始终可见。我认为这与页面上的一些jquery有关，但我不知道它是如何工作的。

这是显示和消失的div：

<a href="#comments_box_b34af24f72ea4d630292ff3a4c4fb4e6" class="comments_link" style="margin-left:5px">
    <img src="/images/user_comment.png" border="0" alt="Comments">
</a>

<div id="comments_box_b34af24f72ea4d630292ff3a4c4fb4e6" style="display:none”>
    <label style="font-weight:normal; font-size:14px;">Comments:</label>
    <textarea name="comments_b34af24f72ea4d630292ff3a4c4fb4e6"></textarea>
</div>
</div>

这是页面上的jquery。

$(document).ready(function(){
    $(".comments_link").toggle(function(){
        $($(this).attr('href')).show('slow');
    },function(){
        $($(this).attr('href')).hide('slow');
    });
});

为什么它不能保持可见，我该如何解决？

Answer 1

首先，在获取其他开发人员的代码时，请务必检查日期。您使用的toggle是jQuery的click toggle，现已弃用并删除。

现在.toggle仅用于可见性目的。它接受2个参数：持续时间和回调。

这里你的代码正在做什么：

$(document).ready(function(){
    $(".comments_link").toggle(function(){ //You set duration to a function, it execute a function
        $($(this).attr('href')).show('slow'); //The function show your element
    },function(){ //Set a callback, so after toggle finish, it call that function
        $($(this).attr('href')).hide('slow'); //The function hide the element
    });
});

你想要的是

A）显示加载元素：

$(document).ready(function(){
    var href = $(".comments_link").attr('href');
    $(href).show('slow');
});

B）点击时显示/隐藏元素：

$(document).ready(function(){
    $(".comments_link").click(function(){
        $($(this).attr('href')).toggle('slow');
    });
});

Answer 2

尝试将jQuery更改为

$(".comments_link").click(function(){
    if($($(this).attr('href')).css("display") == "none")
    {
        $($(this).attr('href')).show('slow');
    }
    else
    {
        $($(this).attr('href')).hide('slow');
    }
});

我认为这就是你想要的......

点击此处查看 DEMO

如果你想隐藏为默认，只需添加

$(function(){
    $($(".comments_link").attr('href')).css("display", "none");
});

您可以在 DEMO

中看到

我的jquery div出现然后消失了

2 个答案: