div切换不起作用我想要它

Question

please take a look at my jsfiddle: http://jsfiddle.net/e8hj27gf/21/

You can see i have a display and hide function, How can i toggle this on and off, using one click event? please keep in mind i require the functionality of being able to close the div if the user clicks outside of it intact.

My Javascript:

    $(document).ready(function () {

      var container = $("#boxwrapper");

       $("#toggleon").click(function (e) {

            if (!container.is(':visible'))
                Display();
       });

       $("#toggleoff").click(function (e) {

            if (container.is(':visible'))
                Hide();
       });



       $(document).mouseup(function (e) {

           if (!container.is(e.target) && container.has(e.target).length === 0) {
                if (container.is(':visible'))
                    Hide();
             }

        });                       
    });

    function Display() {
            $("#boxwrapper").show();
            $("#boxwrapper").addClass("box");              
        }

   function Hide() {
            $("#boxwrapper").hide();           
   }    

I hope that makes sense!

Answer 1

Answer: http://jsfiddle.net/e8hj27gf/25/

JavaScript_

    $(document).ready(function () {
        $("#toggle").click(function(){
             $("#boxwrapper").fadeToggle("slow");  
        });       
    });

CSS

#boxwrapper
    {
        width: 100%;
        margin: auto;
        top: 0px;
        left: 20%;
        right: 0px;
        bottom: 0px;
        background-color: white;
        opacity: 0.4;
        position: fixed;
        overflow-y: scroll;
        overflow-x: scroll;
        display:none;
    }

HTML

    <div id="main">
        <a href='#' id='toggle'>Toggle</a>
    </div>

    <div id="boxwrapper">
    </div>

Search up the jQuery library, specifically toggle().. fadeToggle() , slideToggle() etc. etc.

Answer 2

I think what you want to use is the jQuery .toggle() method.

See: http://api.jquery.com/toggle/

eg:

function ShowHide() {
        $("#boxwrapper").toggle();
        $("#boxwrapper").addClass("box");              
    }