javascript - 如何在单击 anchor 标记时打开和关闭 div 元素

Question

下面是我的html格式，我想在单击open-left标签时打开leftbar div标签，并在点击open-left标签时关闭leftbar div标签单击 open-left 标记。

    <div id="leftbar" class="snap-drawers">
            <div class="snap-drawer snap-drawer-left">
                <div>
                    <br />
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
                        <img src="assets/img/nloop-min.png" alt="" class="drawer-logo" />
                    </div>
                    <br />
                    <ul>
                        <li><a href="#"><i class="fa fa-home fa-1x"></i>&emsp;Home</a></li>
                        <li><a href="#"><i class="fa fa-dot-circle-o fa-1x"></i>&emsp;Tour</a></li>
                        <li><a href="#"><i class="fa fa-bullseye fa-1x"></i>&emsp;FAQ</a></li>
                        <li><a href="#"><i class="fa fa-magic fa-1x"></i>&emsp;About</a></li>
                        <li><a href="#"><i class="fa fa-comment-o fa-1x"></i>&emsp;Contact</a></li>
                    </ul>
                    <br />
                    <p>
                        &copy; 2013 - nLoop</p>
                </div>
            </div>
        </div>
        <div id="content" class="snap-content">
                <div id="sidebarmenu" class="col-lg-1 col-sm-1 col-xs-1 col-md-1">
                    <a href="#" id="open-left"></a>
                </div>
                <div id="rightpart" class="margingap">
            Right part
                </div>
        </div>

    <script type="text/javascript">
            var snapper = new Snap({
                element: document.getElementById('content'),
                disable: 'right'
            });
            $(document).ready(function () {
                var addEvent = function addEvent(element, eventName, func) {
    if (element.addEventListener) {
        return element.addEventListener(eventName, func, false);
    } else if (element.attachEvent) {
        return element.attachEvent("on" + eventName, func);
    }
};

addEvent(document.getElementById('open-left'), 'click', function () {

    snapper.open('left');

        var state = $(this).is('.open');
       if (state) {
            snapper.close('left');
        }
});

            });

        </script> 

Answer 1

点击 anchor 标记时打开和关闭 div 元素:

$("#open-left").click(function(){
    $("#leftbar").toggle();
});

在此处查看更多相关信息:.toggle() Documentation

代码说明:

我只是将点击事件附加到 #open-left 标记，然后调用 #leftbar 上的 .toggle() >。这几乎记录了对象的当前状态(隐藏或显示)，然后根据状态调用特定函数。

另外，请参阅此工作示例:fiddle .