(JQUERY) 我想让一个不可见的 div 在点击时可见并在点击时再次隐藏它

Question

So i have a trouble in which i want to make my invisible "container" visible when i click on my "input type='submit'" and then close it again when i click on close but i cant seem to get it working. HTML

<div id="container">
    <a href="#"><span id="close"><em>x</em></span></a>
<div id="wrapper">
    <font id="wrapper-text"><em>Upload Your Own Video!</em></font>
    <input type="text" placeholder="Title for the video"><br>
    <input type="text" placeholder="User"><br>
    <input type="text" placeholder="Tags"><br>
    <textarea placeholder="Description for the video" rows="7" cols="40"></textarea>
</div>
</div>

CSS

#container {display:none; height:707px; widht:100%; background-color:rgba(255,255,255,0.3)}

Script

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript">
     $(document).ready(function(){
        document.getElementById('#yourown').click(function(){
        document.getElementById("#container").css("display","block");
            )} 
        )}
     $document.ready(function(){
        document.getElementById("#close").click(function{
            document.getElementById("#container").css("display","none")
        })
     })

Answer 1

If you are using jQuery then the use of document.getElementById() is completely inane.
Just use this:

$("#yourown").click(function(){
    $("#container").toggle();
});
$("#close").click(function(){
    $("#container").hide();
});

I'm not exactly sure that this is what you need, your code is kind of messy. Try it out and see if it works.

Answer 2

If you are using jQuery, you probably want to use $('#container').show() and $('#container').hide().

I'd recommend reading up on them here:

You're also missing some semicolons... Something like this should work:

    $('#yourown').click(function(){ 
        $("#container").show(); 
    });
    $("#close").click(function{ 
        $("#container").hide();
    });