Javascript div切换未按我希望的方式工作

请看一下我的JSFIDLE：

您可以看到我有一个显示和隐藏功能，我如何使用一键事件来打开和关闭它？请记住，我需要的功能能够关闭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();           
   }    

我希望这是有道理的

回答：

JavaScript_

CSS

HTML

---

搜索jQuery库，特别是切换。。fadeToggle、slideToggle等。

我认为您想要使用的是jQuery.toggle方法

见：

例如：

---

你的意思是想在显示div时隐藏show链接，只显示hide链接，反之亦然？不，我希望它是一个单独的链接，我可以打开和关闭div，同时保留在用户单击退出时隐藏div的内容，并为答案工作，这是工作，但你拿出的标准，隐藏了div，当点击外面…它能工作吗？是的，它只是在屏幕上除灰色外的任何地方设置点击事件的问题。我会更新小提琴的

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

#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;
    }

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

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

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