Question

<html>

<script src="http://code.jquery.com/jquery-2.0.3.js">    
</script>

<script>
$(document).ready(function(){
    $("#addcomment").click(function () {
        $("#postComment").show();
        return false;
    });
});
</script>

<style>
    #postComment { display: none; }
</style>

        <cfform name="InsertComments" id="InsertComments">
            <fieldset>
<div id="container">
    <div id="mainContent">
    <div><a href="#" id="addcomment">add comment</a></div>
        <div id='postComment'>
            <cftextarea name="Remarks" cols="55" rows="4" label="Tour Description"
                                    required="yes" validateat="OnSubmit" message="Please enter your comment here" 
                                    enabled="no">
                        </cftextarea>
            <cfinput type="text" name="Image_ID" message="Please enter Account Here." 
                                 validateat="onSubmit" required="yes" id="Image_ID" size="10"
                                 maxlength="60">
                        </cfinput>
        <cfinput type="submit" name="insertComments" value="Insert Comments" id="submit">
                        </cfinput>
        </div>
    </div>  
    </fieldset>
    </cfform>
        <cfif IsDefined("form.InsertComments")>

                    <cfquery datasource="AccessTest">
                        INSERT INTO CommentsDB (Remarks, Image_ID, Date_Time )
                        VALUES
                        (<cfqueryparam value="#form.Remarks#" cfsqltype="CF_SQL_LONGVARCHAR">
                    </cfqueryparam>
                        , <cfqueryparam value="#form.Image_ID#" cfsqltype="cf_sql_integer">
                    </cfqueryparam>
                        , <cfqueryparam value="#now()#" cfsqltype="cf_sql_timestamp">
                    </cfqueryparam>
                        )
                    </cfquery>

            </cfif>

</div>

</html>

我还需要什么才能让它发挥作用？

enter image description here

Answer 1

使用.toggle()代替show()。

$("#addcomment").click(function () {
   $("#postComment").toggle("slow");
});

<强> JSFIDDLE DEMO

Answer 2

您需要将return false;添加到点击处理程序的末尾。

更改js：

$(document).ready(function(){
    $("#addcomment").click(function () {
        $("#postComment").show();
        return false;
    });
});

添加CSS：

<style>
    #postComment { display: none; }
</style>

像这样更改HTML：

<div><a href="#" id="addcomment">add comment</a></div>

获取评论框以显示和消失

2 个答案: