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()等。

Answer 2

我认为您要使用的是jQuery .toggle（）方法。

请参阅： http ： //api.jquery.com/toggle/

例如：

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