Question

我正在使用codrops slide＆amp; amp;的修改版本。推送菜单（http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/）以获取网页上的叠加层。但我无法用另一个链接再次关闭它。任何帮助，将不胜感激。 jsfiddle：http://jsfiddle.net/qu80jto2/

HTML：

<nav class="modal modal-vertical modal-right" id="modal">
    <h1>CONTENT</h1>
</nav>

<h1 id="showRight">OPEN</h1>
<h1 id="hideRight">CLOSE</h1>

JQUERY：

<script>
    var 
        menuRight = document.getElementById( 'modal' ),
        body = document.body;

    showRight.onclick = function() {
        classie.toggle( this, 'active' );
        classie.toggle( menuRight, 'modal-open' );
        disableOther( 'showRight' );
    };

    function disableOther( button ) {
        if( button !== 'showRight' ) {
            classie.toggle( showRight, 'disabled' );
        }
    }
</script>

CSS：

.modal {
    background: yellow;
    position: fixed;
}

.modal-vertical {
    width: 60%;
    height: 100%;
    top: 0;
    z-index: 1000;
}

.modal-right {
    right: -60%;
}

.modal-open {
    right: 0px;
}

.modal-push {
    overflow-x: hidden;
    position: relative;
    left: 0;
}

.modal,
.modal-push {
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    transition: all 0.6s ease;
}

Answer 1

你可以尝试这个：

<nav class="modal modal-vertical modal-right" id="modal">
    <h1>CONTENT</h1>
        </nav>

        <h1 id="showRight">OPEN</h1>
        <h1 id="hideRight">CLOSE</h1>

        <script>
            var 
                menuRight = document.getElementById( 'modal' ),
                body = document.body;


            showRight.onclick = function() {
                classie.toggle( this, 'active' );
                classie.toggle( menuRight, 'modal-open' );
                disableOther( 'showRight' );
            };

            function disableOther( button ) {
                if( button !== 'showRight' ) {
                    classie.toggle( showRight, 'disabled' );
                }
            }

            hideRight.onclick = function() {
                classie.toggle( this, 'active' );
                classie.toggle( menuRight, 'modal-open' );
                disableOther( 'hideRight' );
            };

            function disableOther( button ) {
                if( button !== 'hideRight' ) {
                    classie.toggle( hideRight, 'disabled' );
                }
            }
        </script>

DEMO HERE

Answer 2

根据您的问题，当您点击打开并关闭<时，您希望打开或滑入叠加层/ strong>点击关闭时，滑出。

然后这将为你做到：

rest = --- # i am splitting the string in to three(L- as left number cmpr- as compare and R- as right number ) class_name.calc(rest[0],rest[1],rest[2]) def self.calc(L,cmpr,R) case cmpr when "<" if L.to_i < R.to_i return true end .... .... .... end end

这是一个有效的JSFiddle

无法关闭滑动模式

2 个答案: