javascript - div 切换无法按我想要的方式工作

Question

请看一下我的jsfiddle:http://jsfiddle.net/e8hj27gf/21/

您可以看到我有一个显示和隐藏功能，我如何使用一键事件打开和关闭此功能？请记住，我需要这样的功能:如果用户在 div 外部完整单击，则能够关闭该 div。

我的 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();           
   }    

我希望这是有道理的!

Answer 1

答案: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>

搜索jQuery库，特别是toggle()..fadeToggle()、slideToggle()等等。