Question

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

你可以看到我有一个显示和隐藏功能，如何使用一次点击事件打开和关闭它？请记住，如果用户完整地点击它，我需要能够关闭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");              
    }

div切换不按我想要的方式工作

2 个答案: